search

meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

provideEmbeddedHeaders not working in <img> tag #533

Closed AnuDharmarajan closed 2 years ago

AnuDharmarajan commented 2 years ago

Decision Table

Good Faith Declaration

Description

I have added Authorization in img tag it is not working.

React Native Information

"react-native": "0.64.1",

RNRH Version

I am using react-native-render-html Version 6.1.0

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

function provideEmbeddedHeaders(uri, tagName) {

if (tagName === "img" && uri.startsWith("https://xxx.xxx.com")) {

  return {

    Authorization: 'Bearer ' + accessToken

  }
}

} return( <RenderHtml contentWidth={Dimensions.get('window').width - wp('10%')} source={{html: '<img src="https://xxxx.xxx.xx/xxxx/xx/xxxx/xxx/xxxx/23553.png"'}} scrollEnabled={false} //enableCSSInlineProcessing={true} baseStyle={{fontSize:normalize(13)}} emSize = {normalize(13)} renderersProps={renderersProps} provideEmbeddedHeaders={provideEmbeddedHeaders} enableCSSInlineProcessing={true} //absoluteFontSizesPixelMap ={'large'} /> )

Additional Notes

No response

jsamr commented 2 years ago

Hi @AnuDharmarajan, and thanks for your contribution! You didn't explain how you came up to the conclusion that the headers were not passed? Do you have access to the server logs? I'll be happy to help when you provide additional information. Thanks!

AnuDharmarajan commented 2 years ago

@jsamr Thank you for your quick replay. I don't have access in the server. The image is in the share point and we are passing the share point token for Authorization.

jsamr commented 2 years ago

@AnuDharmarajan Did you manage authentication successfully by other means, with postman or other HTTP utilities, so that you can assert this library is faulty? The provideEmbeddedHeaders prop is unit-tested, I have doubts the issue is with this library:

https://github.com/meliorence/react-native-render-html/blob/4c63e9962d225e0bf7f1db745cf9f683f9671690/packages/render-html/src/__tests__/component.render-html.test.tsx#L834-L857

AnuDharmarajan commented 2 years ago

I have managed the authentication successfully in the postman and Image view also. It works fine.But in the Renderhtml it is not working.

jsamr commented 2 years ago

@AnuDharmarajan Can you log in the console from the first line of your provideEmbeddedHttpHeaders and test if this log is being called, and if it is, with which arguments? In the snippet you provided, the HTML string is not valid HTML.

AnuDharmarajan commented 2 years ago

The console is called when there is a img tag. I have given a sample HTML in the snippet because I am not able to provide the correct URL in the public platform.

jsamr commented 2 years ago

@AnuDharmarajan I am reviewing the code; will let you know.

jsamr commented 2 years ago

@AnuDharmarajan It looks like the header is set after fetching the natural dimensions of the image, which would result in an error. I will provide a patch soon!

AnuDharmarajan commented 2 years ago

@jsamr Thank you.

jsamr commented 2 years ago

@AnuDharmarajan Should be fixed in v6.3.0, let me know!

subspacefield-or commented 3 months ago

I'm using version 6.3.4 in IOS and this still seems to be an issue. I have an html fragment like follows: Logo and this requires a bearer token to access. I add provideEmbeddedHeaders as follows:

    function provideEmbeddedHeaders(uri, tagName, params) {
        console.log("provideEmbeddedHeaders: %s", uri);
        if (tagName === "img" && uri.includes("?????")) {
            const bearerString = `Bearer ${AuthConfig.getAuthToken()}`;
            return {
                Authorization: bearerString
              }
        }
    }
    <RenderHtml
        contentWidth={width}
        source={source}
        enableExperimentalBRCollapsing={true}
        provideEmbeddedHeaders={provideEmbeddedHeaders}
        debug={true}
        renderersProps={renderersProps}
    />

I verified using Postman that the image can be downloaded with the token. Let me know if there are anymore details that can be provided to track down this issue.