provideEmbeddedHeaders not working in <img> tag

[AnuDharmarajan]

Decision Table

• My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• I have read the HELP document here: https://git.io/JBi6R
• I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• I have confirmed that this bug has not been reported yet

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

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

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]

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]

@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]

@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:

react-native-render-html/packages/render-html/src/__tests__/component.render-html.test.tsx

Lines 834 to 857 in 4c63e99

	describe('regarding provideEmbeddedHeaders prop', () => {
	it('should apply returned headers to IMG tags', async () => {
	const headers = {
	Authorization: 'Bearer XXX'
	};
	function provideEmbeddedHeaders(uri: string, tag: string) {
	expect(tag).toBe('img');
	return headers;
	}
	const { UNSAFE_getByType, findByTestId } = render(
	<RenderHTML
	source={{
	html: '<img src="https://custom.domain/" />'
	}}
	debug={false}
	contentWidth={100}
	provideEmbeddedHeaders={provideEmbeddedHeaders}
	/>
	);
	await findByTestId('image-success');
	const image = UNSAFE_getByType(Image);
	expect(image.props.source.headers).toBe(headers);
	});
	});

[AnuDharmarajan]

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]

@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]

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]

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

[jsamr]

@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]

@jsamr Thank you.

[jsamr]

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

[subspacefield-or]

I'm using version 6.3.4 in IOS and this still seems to be an issue. I have an html fragment like follows: 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.