Add support for POST header (crossOrigin mode)

Minishlink · Minishlink · commit 8f2b5cb84f09 · 2017-10-01T23:04:35.000+02:00
diff --git a/README.md b/README.md
@@ -16,13 +16,34 @@ resolve: {
 }
 ```
 
+Add the following rule to your webpack config:
+
+```js
+const rule = {
+  test: /postMock.html$/,
+  use: {
+    loader: 'file-loader',
+    options: {
+      name: '[name].[ext]',
+    },
+  },
+};
+```
+
 ## Usage
 ```js
 import WebView from 'WebView'; // don't import from react-native
 ```
 
 See [RN's doc](https://facebook.github.io/react-native/docs/webview.html).
 
+Supported props are:
+- source
+  - uri
+  - uri with POST header (this opens a new window)
+  - html
+- onMessage
+
 ## Examples
 See the [storybook](https://react-native-web-community.github.io/react-native-web-webview/storybook).
 
diff --git a/docs/stories/onMessage.html b/docs/stories/onMessage.html
@@ -19,7 +19,11 @@ <h1>Hello world!</h1>
   });
 
   document.getElementById('button').addEventListener('click', function() {
-    if (window.parent) {
+    if (window.opener) {
+      // Web new window
+      window.opener.postMessage(payload, window.opener.origin);
+      window.close();
+    } else if (window.parent) {
       // Web iframe
       window.parent.postMessage(payload, window.parent.origin);
     } else {
diff --git a/package.json b/package.json
@@ -39,5 +39,8 @@
   },
   "peerDependencies": {
     "react-native-web": "*"
+  },
+  "dependencies": {
+    "qs": "^6.5.1"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,6 @@
+import Qs from 'qs';
 import React, { Component } from 'react';
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
 
 export default class extends Component {
   constructor(props) {
@@ -7,11 +9,38 @@ export default class extends Component {
     if (props.onMessage) {
       window.addEventListener('message', this.onMessage, true);
     }
+
+    if (props.source.method === 'POST') {
+      const contentType = props.source.headers['Content-Type'];
+      let body = '';
+      if (contentType && contentType.includes('application/x-www-form-urlencoded')) {
+        body = Qs.parse(props.source.body);
+      } else {
+        console.warn('[WebView] Content type is not supported yet, please make a PR!', contentType);
+        return;
+      }
+
+      window.open(
+        require('./postMock.html') + '?' +
+          Qs.stringify({
+            uri: props.source.uri,
+            body: JSON.stringify(body),
+          })
+      );
+    }
   }
 
   onMessage = nativeEvent => nativeEvent.isTrusted && this.props.onMessage({ nativeEvent });
 
   render() {
+    if (this.props.source.method === 'POST') {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator />
+        </View>
+      );
+    }
+
     return (
       <iframe
         src={this.props.source.uri}
@@ -25,3 +54,11 @@ export default class extends Component {
     );
   }
 }
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/src/postMock.html b/src/postMock.html
@@ -0,0 +1,23 @@
+<html>
+<body>
+    <div id="content" style="display: none"></div>
+</body>
+<script>
+    const source = new URLSearchParams(window.location.search);
+
+    let html = `<form method="POST" action="${source.get('uri')}">`;
+
+    const params = JSON.parse(source.get('body'));
+
+    Object.entries(params).forEach(([name, value]) => (html += `<input name="${name}" value="${value}" />`));
+
+    html +=
+      "<input id='submit' type='submit' />" +
+      "</form>";
+
+    const div = document.createElement('div');
+    div.innerHTML = html;
+    document.getElementById('content').appendChild(div);
+    document.getElementById('submit').click();
+</script>
+</html>
diff --git a/yarn.lock b/yarn.lock
@@ -2124,6 +2124,10 @@ punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+qs@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"

Original file line number	Diff line number	Diff line change
`@@ -39,5 +39,8 @@`
`39`	`39`	`},`
`40`	`40`	`"peerDependencies": {`
`41`	`41`	`"react-native-web": "*"`
	`42`	`+ },`
	`43`	`+ "dependencies": {`
	`44`	`+ "qs": "^6.5.1"`
`42`	`45`	`}`
`43`	`46`	`}`