include.preload.js - Issue 5666188336037888: Issue 581 - Fixed element hiding/collapsing in anonymous frames on Chrome

Side by Side Diff: include.preload.js

Issue 5666188336037888: Issue 581 - Fixed element hiding/collapsing in anonymous frames on Chrome (Closed)

Patch Set: Also handle <object type="text/html"> Created June 4, 2014, 4:11 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

View unified diff | Download patch

OLD	NEW
1 /*	1 /*

2 * This file is part of Adblock Plus <http://adblockplus.org/>,	2 * This file is part of Adblock Plus <http://adblockplus.org/>,

3 * Copyright (C) 2006-2014 Eyeo GmbH	3 * Copyright (C) 2006-2014 Eyeo GmbH

4 *	4 *

5 * Adblock Plus is free software: you can redistribute it and/or modify	5 * Adblock Plus is free software: you can redistribute it and/or modify

6 * it under the terms of the GNU General Public License version 3 as	6 * it under the terms of the GNU General Public License version 3 as

7 * published by the Free Software Foundation.	7 * published by the Free Software Foundation.

8 *	8 *

9 * Adblock Plus is distributed in the hope that it will be useful,	9 * Adblock Plus is distributed in the hope that it will be useful,

10 * but WITHOUT ANY WARRANTY; without even the implied warranty of	10 * but WITHOUT ANY WARRANTY; without even the implied warranty of

11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the	11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

12 * GNU General Public License for more details.	12 * GNU General Public License for more details.

13 *	13 *

14 * You should have received a copy of the GNU General Public License	14 * You should have received a copy of the GNU General Public License

15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.	15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.

16 */	16 */

17	17

18 var SELECTOR_GROUP_SIZE = 20;	18 var SELECTOR_GROUP_SIZE = 20;

19	19

20 // use Shadow DOM if available to don't mess with web pages that

21 // rely on the order of their own <style> tags. However

22 // the <shadow> element is broken in some Chrome 32 builds (#309)

23 //

24 // also Chrome 31-33 crashes in some situations on some pages when using

25 // ShadowDOM, e.g. when pressing tab key on Wikipedia and Facebook (#498)

26 //

27 // also we must not create the shadow root in the response callback passed

28 // to sendMessage(), otherwise Chrome breaks some websites (#450)

29 var shadow = null;

30 if ("webkitCreateShadowRoot" in document.documentElement && !/\bChrome\/3[1-3]\b /.test(navigator.userAgent))

31 {

32 shadow = document.documentElement.webkitCreateShadowRoot();

33 shadow.appendChild(document.createElement("shadow"));

34 }

35

36 // Sets the currently used CSS rules for elemhide filters

37 function setElemhideCSSRules(selectors)

38 {

39 if (selectors.length == 0)

40 return;

41

42 var style = document.createElement("style");

43 style.setAttribute("type", "text/css");

44

45 if (shadow)

46 {

47 shadow.appendChild(style);

48

49 try

50 {

51 document.querySelector("::content");

52

53 for (var i = 0; i < selectors.length; i++)

54 selectors[i] = "::content " + selectors[i];

55 }

56 catch (e)

57 {

58 for (var i = 0; i < selectors.length; i++)

59 selectors[i] = "::-webkit-distributed(" + selectors[i] + ")";

60 }

61 }

62 else

63 {

64 // Try to insert the style into the <head> tag, inserting directly under the

65 // document root breaks dev tools functionality:

66 // http://code.google.com/p/chromium/issues/detail?id=178109

67 (document.head \|\| document.documentElement).appendChild(style);

68 }

69

70 // WebKit apparently chokes when the selector list in a CSS rule is huge.

71 // So we split the elemhide selectors into groups.

72 for (var i = 0; selectors.length > 0; i++)

73 {

74 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", ");

75 style.sheet.insertRule(selector + " { display: none !important; }", i);

76 }

77 }

78

79 var typeMap = {	20 var typeMap = {

80 "img": "IMAGE",	21 "img": "IMAGE",

81 "input": "IMAGE",	22 "input": "IMAGE",

82 "audio": "MEDIA",	23 "audio": "MEDIA",

83 "video": "MEDIA",	24 "video": "MEDIA",

84 "frame": "SUBDOCUMENT",	25 "frame": "SUBDOCUMENT",

85 "iframe": "SUBDOCUMENT"	26 "iframe": "SUBDOCUMENT"

86 };	27 };

87	28

88 function checkCollapse(event)	29 function checkCollapse(element)

89 {	30 {

90 var target = event.target;	31 var tag = element.localName;

91 var tag = target.localName;	32 if (tag in typeMap)

92 var expectedEvent = (tag == "iframe" \|\| tag == "frame" ? "load" : "error");

93 if (tag in typeMap && event.type == expectedEvent)

94 {	33 {

95 // This element failed loading, did we block it?	34 // This element failed loading, did we block it?

96 var url = target.src;	35 var url = element.src;

97 if (!url)	36 if (!url)

98 return;	37 return;

99	38

100 ext.backgroundPage.sendMessage(	39 ext.backgroundPage.sendMessage(

101 {	40 {

102 type: "should-collapse",	41 type: "should-collapse",

103 url: url,	42 url: url,

104 mediatype: typeMap[tag]	43 mediatype: typeMap[tag]

105 },	44 },

106	45

107 function(response)	46 function(response)

108 {	47 {

109 if (response && target.parentNode)	48 if (response && element.parentNode)

110 {	49 {

111 // <frame> cannot be removed, doing that will mess up the frameset	50 // <frame> cannot be removed, doing that will mess up the frameset

112 if (tag == "frame")	51 if (tag == "frame")

113 target.style.setProperty("visibility", "hidden", "important");	52 element.style.setProperty("visibility", "hidden", "important");

114 else	53 else

115 target.style.setProperty("display", "none", "important");	54 element.style.setProperty("display", "none", "important");

116 }	55 }

117 }	56 }

118 );	57 );

119 }	58 }

120 }	59 }

121	60

	61 function checkExceptionKey()

	62 {

	63 var attr = document.documentElement.getAttribute("data-adblockkey");

	64 if (attr)

	65 ext.backgroundPage.sendMessage({type: "add-key-exception", token: attr});

	66 }

	67

	68 function hasInlineURL(element, attribute)

	69 {

	70 var value = element.getAttribute(attribute);

	71 return value == null \|\| /^\s*(javascript:\|about:\|$)/i.test(value);
	Wladimir Palant 2014/06/17 13:00:24 I'm surprised you check for null explicitly rather I'm surprised you check for null explicitly rather than doing .test(value \|\| "") :) Doing it this way actually makes sense here, we want to treat null and empty src attribute the same. Sebastian Noack 2014/06/17 14:13:48 I want to skip regex matching if the attribute is Show quoted text On 2014/06/17 13:00:24, Wladimir Palant wrote: > I'm surprised you check for null explicitly rather than doing .test(value \|\| "") > :) > > Doing it this way actually makes sense here, we want to treat null and empty src > attribute the same. I want to skip regex matching if the attribute is missing, which is the case with almost all <object> tags. And even if the performance advantage is just theoretical, I don't see how this adds any complexity. Also we want to treat javascript: and about: urls the same as an empty string. But you are not suggesting to replace those with an empty string before testing the string.
	72 }

	73

122 // Converts relative to absolute URL	74 // Converts relative to absolute URL

123 // e.g.: foo.swf on http://example.com/whatever/bar.html	75 // e.g.: foo.swf on http://example.com/whatever/bar.html

124 // -> http://example.com/whatever/foo.swf	76 // -> http://example.com/whatever/foo.swf

125 function relativeToAbsoluteUrl(url)	77 function relativeToAbsoluteUrl(url)

126 {	78 {

127 // If URL is already absolute, don't mess with it	79 // If URL is already absolute, don't mess with it

128 if (!url \|\| /^[\w\-]+:/i.test(url))	80 if (!url \|\| /^[\w\-]+:/i.test(url))

129 return url;	81 return url;

130	82

131 // Leading / means absolute path	83 // Leading / means absolute path

132 // Leading // means network path	84 // Leading // means network path

133 if (url[0] == '/')	85 if (url[0] == '/')

134 {	86 {

135 if (url[1] == '/')	87 if (url[1] == '/')

136 return document.location.protocol + url;	88 return document.location.protocol + url;

137 else	89 else

138 return document.location.protocol + "//" + document.location.host + url;	90 return document.location.protocol + "//" + document.location.host + url;

139 }	91 }

140	92

141 // Remove filename and add relative URL to it	93 // Remove filename and add relative URL to it

142 var base = document.baseURI.match(/.+\//);	94 var base = document.baseURI.match(/.+\//);

143 if (!base)	95 if (!base)

144 return document.baseURI + "/" + url;	96 return document.baseURI + "/" + url;

145 return base[0] + url;	97 return base[0] + url;

146 }	98 }

147	99

148 function init()	100 function init(document)

149 {	101 {

150 // Make sure this is really an HTML page, as Chrome runs these scripts on just about everything	102 var canUseShadow = "webkitCreateShadowRoot" in document.documentElement;

151 if (!(document.documentElement instanceof HTMLElement))	103 var fixInlineFrames = false;

152 return;

153	104

154 document.addEventListener("error", checkCollapse, true);	105 var match = navigator.userAgent.match(/\bChrome\/(\d+)/);

155 document.addEventListener("load", checkCollapse, true);	106 if (match)

	107 {

	108 var chromeVersion = parseInt(match[1]);

156	109

157 var attr = document.documentElement.getAttribute("data-adblockkey");	110 // the <shadow> element is ignored in Chrome 32 (#309). Also Chrome 31-33

158 if (attr)	111 // crashes in some situations on some pages when using shadow DOM (#498).

159 ext.backgroundPage.sendMessage({type: "add-key-exception", token: attr});	112 // So we must not use Shadow DOM on those versions of Chrome.

	113 if (chromeVersion >= 31 && chromeVersion <= 33)

	114 canUseShadow = false;

	115

	116 // prior to Chrome 37, content scripts don't run on about:blank

	117 // and about:srcdoc. So we have to apply element hiding and collapsing

	118 // from the parent frame, when inline frames are loaded.

	119 if (chromeVersion < 37)

	120 fixInlineFrames = true;

	121 }

	122

	123 // use Shadow DOM if available to don't mess with web pages that

	124 // rely on the order of their own <style> tags (#309). However we

	125 // must not create the shadow root in the response callback passed

	126 // to sendMessage(), otherwise Chrome breaks some websites (#450).

	127 if (canUseShadow)

	128 {

	129 var shadow = document.documentElement.webkitCreateShadowRoot();

	130 shadow.appendChild(document.createElement("shadow"));

	131 }

	132

	133 // Sets the currently used CSS rules for elemhide filters

	134 var setElemhideCSSRules = function(selectors)

	135 {

	136 if (selectors.length == 0)

	137 return;

	138

	139 var style = document.createElement("style");

	140 style.setAttribute("type", "text/css");

	141

	142 if (canUseShadow)

	143 {

	144 shadow.appendChild(style);

	145

	146 try

	147 {

	148 document.querySelector("::content");

	149

	150 for (var i = 0; i < selectors.length; i++)

	151 selectors[i] = "::content " + selectors[i];

	152 }

	153 catch (e)

	154 {

	155 for (var i = 0; i < selectors.length; i++)

	156 selectors[i] = "::-webkit-distributed(" + selectors[i] + ")";

	157 }

	158 }

	159 else

	160 {

	161 // Try to insert the style into the <head> tag, inserting directly under t he

	162 // document root breaks dev tools functionality:

	163 // http://code.google.com/p/chromium/issues/detail?id=178109

	164 (document.head \|\| document.documentElement).appendChild(style);

	165 }

	166

	167 var setRules = function()

	168 {

	169 // The sheet property might not exist yet if the

	170 // <style> element was created for a sub frame

	171 if (!style.sheet)

	172 {

	173 setTimeout(setRules, 0);

	174 return;

	175 }

	176

	177 // WebKit apparently chokes when the selector list in a CSS rule is huge.

	178 // So we split the elemhide selectors into groups.

	179 for (var i = 0; selectors.length > 0; i++)

	180 {

	181 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", ");

	182 style.sheet.insertRule(selector + " { display: none !important; }", i);

	183 }

	184 };

	185

	186 setRules();

	187 };

	188

	189 document.addEventListener("error", function(event)

	190 {

	191 checkCollapse(event.target);

	192 }, true);

	193

	194 document.addEventListener("load", function(event)

	195 {

	196 var element = event.target;

	197 var isFrame = /^i?frame$/.test(element.localName);

	198

	199 if (isFrame)

	200 checkCollapse(element);

	201

	202 if (fixInlineFrames && (isFrame ? hasInlineURL(element, "src") \|\|

	203 element.hasAttribute("srcdoc")

	204

	205 : element.localName == "object" &&

	206 hasInlineURL(element, "data") &&

	207 element.documentElement))
	Wladimir Palant 2014/06/17 13:00:24 There is at least one more scenario: <embed src=". There is at least one more scenario: <embed src="..." type="text/html"> What is element.documentElement? IMHO this property doesn't exist. I guess you meant to check element.contentDocument? The logic here is getting complicated enough that it makes sense to simplify it, e.g. by using a map: { "frame": src, "iframe": src, "object": data, "embed:" src } Then you will still have a special case for srcdoc - that one is specific to the iframe tag however, it isn't allowed on a frame tag (your code is getting this wrong right now). Sebastian Noack 2014/06/17 14:13:48 As discussed on IRC, we ignore this case because i Show quoted text On 2014/06/17 13:00:24, Wladimir Palant wrote: > There is at least one more scenario: <embed src="..." type="text/html"> As discussed on IRC, we ignore this case because it is rather exotic and would add additional complexity since there is no contentDocument property for <embed> elements. Show quoted text > What is element.documentElement? IMHO this property doesn't exist. I guess you > meant to check element.contentDocument? Ouch, you are right. Fixed. Show quoted text > The logic here is getting complicated enough that it makes sense to simplify it, > e.g. by using a map: > > { > "frame": src, > "iframe": src, > "object": data, > "embed:" src > } I don't see how that mapping would make anything less complicated. For iframes we additionally have to check for srcdoc. For objects we have to make sure that contentDocument exist. And for embed (if we would handle it) we would have to get the document from window.frames. So beside the attribute there is still one more thing that is special in each case. However we can move those check into a separate function using switch/case. Show quoted text > Then you will still have a special case for srcdoc - that one is specific to the > iframe tag however, it isn't allowed on a frame tag (your code is getting this > wrong right now). Good point. Fixed.
	208 {

	209 init(element.contentDocument);

	210

	211 for (var tagName in typeMap)

	212 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam e(tagName), checkCollapse);

	213 }

	214 }, true);

160	215

161 ext.backgroundPage.sendMessage({type: "get-selectors"}, setElemhideCSSRules);	216 ext.backgroundPage.sendMessage({type: "get-selectors"}, setElemhideCSSRules);

162 }	217 }

163	218

164 // In Chrome 18 the document might not be initialized yet	219 if (document.documentElement instanceof HTMLElement)

165 if (document.documentElement)	220 {

166 init();	221 checkExceptionKey();

167 else	222 init(document);

168 window.setTimeout(init, 0);	223 }

OLD	NEW

« no previous file with comments | « background.js ('k') | lib/basedomain.js » ('j') | no next file with comments »