首页 > 解决方案 > WebExtensions API - 将模态注入网站 content and pass cookies</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - WebExtensions API - 将模态注入网站<iframe> content and pass cookies</h1> </div> <div class="con"> <h3>问题描述</h3> <p>I am using <em>(fraction of)</em> the accepted answer in: <a href="https://stackoverflow.com/questions/24641592/injecting-iframe-into-page-with-restrictive-content-security-policy/24649134#24649134">Inject iframe into page with restrictive content</a> to inject <code><iframe></code> to a webpage that is part of the content of a modal window. Currently I am able to access the external website displayed in the <code><iframe></code> and pass my cookies to it just fine, but upon interacting with it <em>(clicking on a submit button)</em> my cookies are not sent with the <code>onclick</code> event (which points to a JS function making AJAX request to the server). Therefor the server says that I am not logged in.</p>
<p><strong>The question:</strong> How to pass the cookies with the AJAX? Is that even possible?</p>
<p><strong>What I have tried:</strong> Editing the cookies <code>SameSite</code> value to <code>None</code> and the <code>Secure</code> to <code>true</code> for the website displayed in the <code><iframe></code> allows the cookies to be passed. It is desirable however not instruct the user to modify browser settings or cookies.</p>
<p><strong>manifest.json:</strong></p>
<pre><code>{
 "manifest_version": 2,

 "name": "Add button",
 "description": "This extension will add some buttons to page.",
 "version": "1.0",

 "background": {
 "scripts": ["background.js"]
 },
 "browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 },
 "permissions": [
 "activeTab",
 "webNavigation",
 "tabs",
 "https://*.example.com/*",
 "https://external-iframe-site.com/*"
 ],
 "web_accessible_resources": [
 "contentBackground.js",
 "modal.js",
 "iframe.html"
 ]
}
</code></pre>
<p><strong>background.js</strong></p>
<pre><code>const filter = {
 url: [
 {
 urlMatches: '(example.com\/in)'
 }
 ]
}

chrome.webNavigation.onHistoryStateUpdated.addListener(
 function(details) 
 {
 chrome.tabs.executeScript(null,{file:"jquery-1.6.1.min.js"},
 function()
 {
 chrome.tabs.insertCSS({file: "content.css"});
 chrome.tabs.executeScript(null,{file:"modal.js"});
 });
 }, filter);
</code></pre>
<p><strong>iframe.html</strong></p>
<pre><code><iframe src="https://external-iframe-site.com/php/sync_user.php?action=Check&profileCode=someProfileCodeForTheExample" 
></iframe>
</code></pre>
<p><strong>modal.js</strong></p>
<pre><code>let a = document.createElement("a"); // Create Check with DOM
 a.innerHTML = "Check";
 a.id = "chkBtn";
 a.target = "_blank";
 let checkLink = "https://external-iframe-site.com/php/sync_user.php?action=Check&profileCode={profileCode}";
 checkLink = checkLink.replace("{profileCode}", encodeURI(window.location.href));
 a.href = checkLink;
 $("div.target").prepend(a);

var modal = (function(){
 var 
 method = {},
 $overlay,
 $modal,
 $content,
 $close;

// ... methods for closing/opening/etc. that you do not need to know ...

 // Generate the HTML and add it to the document
 $overlay = $('<div id="overlay"></div>');
 $modal = $('<div id="modal"></div>');
 $content = $('<div id="content"></div>');
 $close = $('<a id="close" href="#">close</a>');

 $modal.hide();
 $overlay.hide();
 $modal.append($content, $close);

 $(document).ready(function(){
 $('div.authentication-outlet').append($overlay, $modal);
 });

 return method;
}());

// Get iframe local url
var iframeOrigin = chrome.runtime.getURL('iframe.html');

// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
 $('#chkBtn').click(function(e){
 //Opens the modal with "src" of the local iframe.html file
 modal.open({content:
 '<iframe src=' + '"' + iframeOrigin + '"'+' width="992" height="500"></iframe>'
 });
 e.preventDefault();
 });
});
</code></pre>
<p class="author">标签： <span>javascript</span><span>cookies</span><span>iframe</span><span>google-chrome-extension</span><span>firefox-addon-webextensions</span></div> <h3>解决方案</h3> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/69223477.html">python - 更改 Selenium webdriver 的用户代理客户端提示</a></li><li><a href="/question/69223479.html">typescript - 在 Mocha 中测试 props.history</a></li><li><a href="/question/69223480.html">java - 使用 JPA 和 Spring Boot 获取表记录时使用多列作为过滤器</a></li><li><a href="/question/69223481.html">git-config - ~/.gitconfig：设置子命令选项</a></li><li><a href="/question/69223484.html">python - 文本文件到列并存储在每个列的单独数组中</a></li><li><a href="/question/69223491.html">location - FTK-经纬度无效，看不懂</a></li><li><a href="/question/69223495.html">c# - Microsoft Graph API - 获取共享时出错</a></li><li><a href="/question/69223496.html">windows - 具有差异列的两个 csv 文件之间的 Grep 差异</a></li><li><a href="/question/69223497.html">ruby-on-rails - 如何仅显示未与 Rails 中的项目链接的用户</a></li><li><a href="/question/69223498.html">reactjs - 在 Styled Comp 中传递的道具未渲染</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>