一、什么是同源策略
同源策略,是由Netscape提出的一个著名的安全策略,现在所有支持javascript的浏览器都会使用这个策略。
为什么需要同源策略,这里举个例子:
假设在浏览器的一个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站引入了一个javascript脚本。如果没有同源策略,那么这个脚本就可以获取或篡改银行网站上的信息
同源策略是由浏览器来实现的。浏览器在执行一个javascript脚本之前,首先会负责进行“同源检查”,如果javascript和页面不是同源的,浏览器就会拒绝执行这个javascript脚本
二、chrome extension违反了同源策略吗
function click(e) {
chrome.tabs.executeScript(null, {
code : "document.body.style.backgroundColor='red'"
});
window.close();
}
上述js代码,在点击chrome扩展中的一个按钮时,会改变当前TAB页面里的背景颜色
利用chrome.tabs.executeScript()方法,还可以做很多事情,当然也包括获取document里的信息
看起来,chrome extension违反了同源策略
但是实际上并不是这样,chrome通过2个层面来保证安全
首先chrome扩展是需要通过google审查的,并不是随意发布的,所以比来路不明的javascript安全
其次,在开发chrome extension时,需要在manifest文件中进行权限声明:
"permissions": [
"tabs",
"notifications",
"http://localhost:8080/",
"http://www.baidu.com/"
]
因此,在用户选择安装这个extensions时,就会给出警告,类似于android上的权限声明机制
所以,chrome extensions并不是违反javascript同源策略的
3、chrome.tabs、chrome.windows、document、window
这几个概念有点混淆,顺便在此澄清一下
document和window是javascript里特有的概念,不是浏览器特有的
window是窗口,document是窗口里加载的文档模型(DOM)
详细的介绍,可以看这篇文章:
http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/
在具体的浏览器实现里,则有windows和tabs的区别
很早以前(IE6之前),浏览器的一个窗口只能打开一个网页;现在基本所有的浏览器都支持TAB了
chrome也提供了API,来控制windows和tabs,分别是chrome.windows和chrome.tabs
4、扩展和插件(extensions and plugins)
扩展和插件不同
扩展主要用javascript开发,可以用chrome://extensions管理
插件用NPAPI开发,语言是C++,可以用chrome://plugins管理
- 大小: 6.5 KB
分享到:
相关推荐
ui.tabs 选项卡
jquery的UI的选项卡tabs插件jquery.ui.tabs.js
使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
jquery插件之tabs 一个短小精悍实用的jquery插件,精美的页面你也可以做到!
jquery.mobile.tabs 是最新juqery的技术包含jquery.mobile.tabs.css 以及jquery.mobile.tabs.js 方便新手找资源
Google I/O 2015中介绍的Chrome Custom Tabs示例.zip,Chrome自定义选项卡示例
asp.tabs的技术代码
app:tabIndicatorColor :指示线的颜色 app:tabIndicatorHeight : 指示线的高度 app:tabIndicatorFullWidth=false 指示线是否铺满宽度 app:tabSelectedTextColor : tab选中时的字体颜色 app:tabTextColor=@color/...
Chrome中的Chrome标签页 正是您认为的那样。 去野外。 由@desandro提供的拖放支持。
英文说明| jQuery tabs插件。 简单易用的选项卡,具有许多选项和皮肤支持 版本:1.0.2 描述 在一页上支持许多选项卡组。 生成事件和回调。 对于页面上的每个选项卡组,支持多种类型的位置... ion.tabs.skinFlat.cs
flutter_custom_tabs Flutter插件,可使用。 只有Android版Chrome支持“自定义标签”。 因此,界面相同,但是行为如下: 安卓如果安装了Chrome,请在自定义标签中打开已自定义外观的Web URL。 如果尚未安装,请在...
一个漂亮的jquery插件,用于选项卡制作的必备。
系统依赖DLL动态库
chromeTabs,google浏览器的标签delphi安装包
tfTabs A clone of ActionBarTabs in ...src/com.tf.library.tabs.TabsHolder.java res/layout/tab.xml Add it in your layout xml file: Add a few lines in your activity code: // Set up the tabs tabsHold
simple-chrome-custom-tabs Navigating to external websites from your app? "Yes, that one is easy" Wondering how to keep the user in context? "I know... it can be done using WebView, but I don't like...
$.tabs.prototype = { init:function(obj){ var that = this; //配置属性 $.extend(this,{ selectedClass:"dom_tabs_selected", tabsSelector:">dt a", panelsSelector:">dd", click:$.noop, selected:0 ...
jquery js tab效果示例下载 。。。。。。。。。。。。。。。。。。。。。。。
Chrome Custom Tabs - Examples and Documentation Chrome Custom Tabs provides a way for an application to customize and interact with a Chrome Activity on Android. This makes the web content feel like ...
c.Tabs.Create(tabDetails, func(tab chrome.Tab) { notification := "Tab with id: " strconv.Itoa(tab.Id) " created!" dom.GetWindow().Document().GetElementByID("notification")....