feat(iframe-plugin): support headers via provideEmbeddedHeaders prop

jsamr · jsamr · commit 436a2ace0afc · 2021-10-12T10:46:35.000-03:00
diff --git a/example/CustomExample.js b/example/CustomExample.js
@@ -183,6 +183,7 @@ export default function CustomExample({
   return (
     <RenderHTML
       key={`custom-${instance}`}
+      provideEmbeddedHeaders={(uri, tagName) => null}
       source={{ html: table1 }}
       contentWidth={availableWidth}
       renderersProps={{
diff --git a/packages/iframe-plugin/README.md b/packages/iframe-plugin/README.md
@@ -127,6 +127,41 @@ equivalent to `resizeMode: 'contain'` for images. See example below with
 
 ![](/blob/master/images/scalesPageToFit.jpg)
 
+## Providing headers
+
+```jsx
+import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin';
+import RenderHTML from 'react-native-render-html';
+import WebView from 'react-native-webview';
+
+const renderers = {
+  iframe: IframeRenderer
+}
+
+const customHTMLElementModels = {
+  iframe: iframeModel
+}
+
+function provideEmbeddedHeaders(uri, tagName) {
+  if (tagName === "iframe" && uri.startsWith("https://protected-domain.com")) {
+    // Pass an authorization header to all iframes in protected-domain.com
+    return {
+      Authorization: "Bearer XXXXXXXX";
+    }
+  }
+}
+
+// ...
+
+<RenderHTML renderers={renderers}
+      WebView={WebView}
+      source={{ html: '<iframe width="400" height="200" src="https://protected-domain.com/user/cart?embedded"></iframe>' }}
+      customHTMLElementModels={customHTMLElementModels}
+      provideEmbeddedHeaders={provideEmbeddedHeaders}
+/>
+
+```
+
 ## Customizing the renderer
 
 You can customize the renderer logic thanks to `useHtmlIframeProps` hook, `iframeModel` and `HTMLIframe` exports:
@@ -137,7 +172,7 @@ import {useHtmlIframeProps, HTMLIframe, iframeModel} from '@native-html/iframe-p
 const IframeRenderer = function IframeRenderer(props) {
   const iframeProps = useHtmlIframeProps(props);
   // Do customize the props here; wrap with your own container...
-  return iframeProps ? <HTMLIframe {...iframeProps} /> : null;
+  return <HTMLIframe {...iframeProps} />;
 };
 
 const renderers = {
diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframe.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframe.md
@@ -9,7 +9,7 @@ A component to render iframes in react-native-render-html.
 <b>Signature:</b>
 
 ```typescript
-export default function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export default function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 ```
 
 ## Parameters
@@ -20,5 +20,5 @@ export default function HTMLIframe({ WebView, webViewProps: userWebViewProps, so
 
 <b>Returns:</b>
 
-React.ReactElement&lt;any, string \| ((props: any) =&gt; React.ReactElement&lt;any, string \| any \| (new (props: any) =&gt; React.Component&lt;any, any, any&gt;)&gt; \| null) \| (new (props: any) =&gt; React.Component&lt;any, any, any&gt;)&gt;
+React.ReactElement&lt;any, string \| React.JSXElementConstructor&lt;any&gt;&gt;
 
diff --git a/packages/iframe-plugin/docs/iframe-plugin.md b/packages/iframe-plugin/docs/iframe-plugin.md
@@ -9,7 +9,7 @@
 |  Function | Description |
 |  --- | --- |
 |  [HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit })](./iframe-plugin.htmliframe.md) | A component to render iframes in react-native-render-html. |
-|  [useHtmlIframeProps({ key, style, tnode }, iframeConfig)](./iframe-plugin.usehtmliframeprops.md) | Extract props for the HTMLIframe component from renderer function arguments. This function is especially usefull for custom iframe renderers. |
+|  [useHtmlIframeProps({ style, tnode }, iframeConfig)](./iframe-plugin.usehtmliframeprops.md) | Extract props for the HTMLIframe component from renderer function arguments. This function is especially usefull for custom iframe renderers. |
 
 ## Interfaces
 
diff --git a/packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md b/packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md
@@ -9,19 +9,17 @@ Extract props for the HTMLIframe component from renderer function arguments. Thi
 <b>Signature:</b>
 
 ```typescript
-export default function useHtmlIframeProps({ key, style, tnode }: CustomRendererProps<TBlock>, iframeConfig?: IframeConfig): (HTMLIframeProps & {
-    key?: any;
-}) | null;
+export default function useHtmlIframeProps({ style, tnode }: CustomRendererProps<TBlock>, iframeConfig?: IframeConfig): HTMLIframeProps | null;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { key, style, tnode } | CustomRendererProps&lt;TBlock&gt; |  |
+|  { style, tnode } | CustomRendererProps&lt;TBlock&gt; |  |
 |  iframeConfig | [IframeConfig](./iframe-plugin.iframeconfig.md) | Override config options. |
 
 <b>Returns:</b>
 
-([HTMLIframeProps](./iframe-plugin.htmliframeprops.md) &amp; { key?: any; }) \| null
+[HTMLIframeProps](./iframe-plugin.htmliframeprops.md) \| null
 
diff --git a/packages/iframe-plugin/etc/iframe-plugin.api.md b/packages/iframe-plugin/etc/iframe-plugin.api.md
@@ -16,7 +16,7 @@ import type { TBlock } from '@native-html/transient-render-engine';
 import { ViewStyle } from 'react-native';
 
 // @public
-export function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)>;
+export function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>>;
 
 // @public
 export interface HTMLIframeProps<WebViewProps = any> extends IframeConfig {
@@ -49,9 +49,7 @@ const IframeRenderer: CustomBlockRenderer;
 export default IframeRenderer;
 
 // @public
-export function useHtmlIframeProps({ key, style, tnode }: CustomRendererProps<TBlock>, iframeConfig?: IframeConfig): (HTMLIframeProps & {
-    key?: any;
-}) | null;
+export function useHtmlIframeProps({ style, tnode }: CustomRendererProps<TBlock>, iframeConfig?: IframeConfig): HTMLIframeProps | null;
 
 
 // (No @packageDocumentation comment for this package)
diff --git a/packages/iframe-plugin/src/__tests__/IframeRenderer.test.tsx b/packages/iframe-plugin/src/__tests__/IframeRenderer.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import HTML from 'react-native-render-html';
+import HTML, { RenderHTMLProps } from 'react-native-render-html';
 import renderer from 'react-test-renderer';
 import WebView from 'react-native-webview';
 import IframeRenderer from '../IframeRenderer';
@@ -21,4 +21,30 @@ describe('iframe renderer', () => {
       );
     }).not.toThrow();
   });
+  it('should support provideEmbeddedHeaders prop', () => {
+    const props: RenderHTMLProps = {
+      source: {
+        html: '<iframe width="300" height="300" src="https://google.com/" />'
+      },
+      provideEmbeddedHeaders: (uri, tagName, params) => {
+        if (tagName === 'iframe') {
+          params;
+          return {
+            'X-Frame-Options': 'ALLOW-FROM https://google.com'
+          };
+        }
+      }
+    };
+    const rendered = renderer.create(
+      <HTML
+        WebView={WebView}
+        renderers={{
+          iframe: IframeRenderer
+        }}
+        contentWidth={10}
+        {...props}
+      />
+    );
+    expect(rendered.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/packages/iframe-plugin/src/index.ts b/packages/iframe-plugin/src/index.ts
@@ -11,4 +11,17 @@ declare module 'react-native-render-html' {
      */
     iframe?: IframeConfig;
   }
+
+  interface EmbeddedWithHeadersParamsMap {
+    iframe: {
+      /**
+       * The print height of the iframe in DPI.
+       */
+      printHeight: number;
+      /**
+       * The print width of the iframe in DPI.
+       */
+      printWidth: number;
+    };
+  }
 }
diff --git a/packages/iframe-plugin/src/useHtmlIframeProps.ts b/packages/iframe-plugin/src/useHtmlIframeProps.ts
@@ -32,8 +32,12 @@ export default function useHtmlIframeProps(
   { style, tnode }: CustomRendererProps<TBlock>,
   iframeConfig?: IframeConfig
 ): HTMLIframeProps | null {
-  const { WebView, defaultWebViewProps, computeEmbeddedMaxWidth } =
-    useSharedProps();
+  const {
+    WebView,
+    defaultWebViewProps,
+    computeEmbeddedMaxWidth,
+    provideEmbeddedHeaders
+  } = useSharedProps();
   const contentWidth = useContentWidth();
   const globalIframeConfig = useRendererProps('iframe');
   const { onPress: onLinkPress } = useRendererProps('a');
@@ -77,7 +81,13 @@ export default function useHtmlIframeProps(
 
   const source = htmlAttribs.srcdoc
     ? { html: htmlAttribs.srcdoc as string, baseUrl: documentBaseUrl }
-    : { uri: normalizedUrl };
+    : {
+        uri: normalizedUrl,
+        headers: provideEmbeddedHeaders?.(normalizedUrl, 'iframe', {
+          printHeight,
+          printWidth
+        })
+      };
 
   if (__DEV__ && !WebView) {
     console.warn(
