monaca&Wordpressでiframeのクロスオリジン対策を行いたい
現在、Wordpressで作成したサイトをmonacaのonsenUI+Angularjsを使って4つのIframeで4つのページを別々に呼び出して各Iframeの遷移履歴を管理し、戻るや進むなどの履歴操作をする簡単なアプリを作っているのですが、iOSアプリでUIWebviewではなくWKWebviewを使わなければならないことを知り、切り替えたところ以下のエラーが発生しました。
iframeで別オリジンのサイトに対して遷移させるなどの操作を行っていることが原因かと思われます。
SecurityError: Blocked a frame with origin "url" from accessing a cross-origin frame. Protocols, domains, and ports must match.
試したこと
######cordovaプラグインのインストール
・cordova-plugin-wkwebview-file-xhr
・cordova-plugin-advanced-http
・cordova-plugin-whitelist
・cordova-plugin-wkwebview-engine
######config.xml
xml
1 <preference name="WKWebViewOnly" value="true"/> 2 <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/> 3 <feature name="CDVWKWebViewEngine"> 4 <param name="ios-package" value="CDVWKWebViewEngine"/> 5 </feature> 6 <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
######Wordpressのfunction.php
php
1add_action('send_headers', 'cors_http_header'); 2function cors_http_header(){ 3 header("Access-Control-Allow-Origin: *"); 4 header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); 5 header("Access-Control-Allow-Credentials: true"); 6 header("X-Frame-Options: ALLOW"); 7} 8
補足情報(FW/ツールのバージョンなど)
cordova-plugin-wkwebview-file-xhr v3.0.0
cordova-plugin-advanced-http v3.0.1
cordova-plugin-whitelist v1.3.3
cordova-plugin-wkwebview-engine v1.2.1
あなたの回答
tips
プレビュー