表单 POST 数据在 WKWebview 中通过 cordova inappbrowser 失败

Question

我正在使用 cordova inAppbrowser(v4.0.0) 插件将 post 数据传输到外部 url。表单 post 在 UIWebview 中工作正常，但它在 WKwebview 中失败。 post 数据被完全忽略。

let formContent = '<form action="' + URL + '" name=“myForm” id="myForm" method="post" target="secureiframe">';
    let element = document.createElement("div");
    let hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", “username”);
    hiddenField.setAttribute("value", “test”);
    element.appendChild(hiddenField);
    formContent += element.innerHTML;
    formContent += '</form>';
    let formContentUrl = 'data:text/html;base64,' + btoa(formContent);

let options = {location: 'no', usewkwebview: 'yes'}


var browser = this.inAppBrowser.create(formContentUrl, "_blank", options);


browser.on('loadstop').subscribe(event => {

       browser.executeScript({code:"document.getElementById('myForm').submit();"} );

 });

Answer 1

由于某些原因，WKWebView 是 stripping-off 原点为空时 post 请求中的正文。

这里的问题是data-uri:

let formContentUrl = 'data:text/html;base64,' + btoa(formContent);

当您加载此数据时 url 原点将被设置为不透明，这是 null 并且由于 WKWebView 正在剥离 post 主体。

要解决此问题，您可以在 WKWebView 中加载原点 URL，然后在 'loadstop' 事件中构建表单，将其添加到 DOM 中，然后触发提交事件。这将确保设置了原点并且 WKWebView 不会 strip-off 请求正文。

示例代码：

constbrowser = this.iab.create('https://your-app-server-where-to-post-the-form', '_blank', options);
     
    browser.on('loadstop').subscribe((event) => {
    browser.executeScript({
    code:`
     var form = document.createElement("form");
     var element1 = document.createElement("input");
     var element2 = document.createElement("input");
     
     form.method = "POST";
     form.action = "your-form-action-route";
     
     element1.value="un";
     element1.name="un";
     form.appendChild(element1);
     
     element2.value="pw";
     element2.name="pw";
     form.appendChild(element2);
     
     document.body.appendChild(form);
     
     form.submit();
     `,
     });
     });

表单 POST 数据在 WKWebview 中通过 cordova inappbrowser 失败

Form POST data is failing in WKWebview through cordova inappbrowser

post

cordova

inappbrowser

wkwebview