我们有一个在桌面和支持互联网的电视上运行的网络应用程序。目前我们正在使用 User-Agent 标头来确定要服务的接口。
我现在的任务是在不阻止访问桌面网站的情况下从桌面浏览器访问电视界面,因此我认为将其包装为 chrome 应用程序可以解决问题,但存在一些问题。
打包应用方法
我使用 chrome.webRequest.onBeforeSendHeaders 函数创建了一个打包的应用程序,其中包含一个加载主网站的 iframe 和一些 javascript 以覆盖用户代理的纯 html 文件。
清单.json
{
"app": {
"launch": {
"local_path": "index.html"
}
},
"permissions": [
"webRequest", "webRequestBlocking", "cookies",
"*://my.site.url/*"
]
}
索引.html
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<iframe src="http://my.site.url"></iframe>
</body>
</html>
main.js
chrome.webRequest.onBeforeSendHeaders.addListener(
function(details)
{
var headers = details.requestHeaders;
for (var i = 0; i < headers.length; ++i)
{
if (headers[i].name === 'User-Agent')
{
headers[i].value += " Chromebox"
break;
}
}
return {requestHeaders: headers};
},
{
urls: ["*://my.site.url/*"]
},
["blocking", "requestHeaders"]
);
问题
- 我必须允许将整个站点加载到 iframe 中,从而将其打开以进行可能的点击劫持
- 当应用程序打开时,它还会在导航到另一个选项卡中的主站点时触发 onBeforeSendHeaders 侦听器,从而导致用户代理被修改,并且对站点的所有请求都被重定向到电视界面。
托管应用程序方法
我创建了一个托管应用程序,其起始 url 指向主站点,并创建了一个运行 javascript 以覆盖用户代理的后台页面。
清单.json
{
"app": {
"launch": {
"web_url": "http://my.site.url"
}
},
"background_page": "https://my.site.url/chromebox/index.html",
"permissions": [
"webRequest", "webRequestBlocking", "background",
"*://my.site.url/*"
]
}
索引.html
<html><script src="main.js"></script></html>
问题
- 安装后,后台页面 javascript 始终运行,因此用户始终被重定向到电视网站
理想的解决方案是托管应用程序,只有在应用程序打开时才运行后台页面,并且 onBeforeSendHeaders 侦听器不会影响 chrome 应用程序之外的任何请求。
有人知道我如何实现这一目标吗?