| LEFT | RIGHT |
| 1 /* | 1 /* |
| 2 * This file is part of Adblock Plus <https://adblockplus.org/>, | 2 * This file is part of Adblock Plus <https://adblockplus.org/>, |
| 3 * Copyright (C) 2006-present eyeo GmbH | 3 * Copyright (C) 2006-present 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 /** @module requestBlocker */ | 18 /** @module requestBlocker */ |
| 19 | 19 |
| 20 "use strict"; | 20 "use strict"; |
| 21 | 21 |
| 22 const {Filter, RegExpFilter, BlockingFilter} = | 22 const {Filter, RegExpFilter, BlockingFilter} = |
| 23 require("../adblockpluscore/lib/filterClasses"); | 23 require("../adblockpluscore/lib/filterClasses"); |
| 24 const {Subscription} = require("../adblockpluscore/lib/subscriptionClasses"); | 24 const {Subscription} = require("../adblockpluscore/lib/subscriptionClasses"); |
| 25 const {defaultMatcher} = require("../adblockpluscore/lib/matcher"); | 25 const {defaultMatcher} = require("../adblockpluscore/lib/matcher"); |
| 26 const {FilterNotifier} = require("../adblockpluscore/lib/filterNotifier"); | 26 const {FilterNotifier} = require("../adblockpluscore/lib/filterNotifier"); |
| 27 const {Prefs} = require("./prefs"); | 27 const {Prefs} = require("./prefs"); |
| 28 const {checkWhitelisted, getKey} = require("./whitelisting"); | 28 const {checkWhitelisted, getKey} = require("./whitelisting"); |
| 29 const {stringifyURL, extractHostFromFrame, isThirdParty} = require("./url"); | 29 const {extractHostFromFrame, isThirdParty} = require("./url"); |
| 30 const {port} = require("./messaging"); | 30 const {port} = require("./messaging"); |
| 31 const {logRequest: hitLoggerLogRequest} = require("./hitLogger"); | 31 const {logRequest: hitLoggerLogRequest} = require("./hitLogger"); |
| 32 | 32 |
| 33 const extensionProtocol = new URL(browser.extension.getURL("")).protocol; | 33 const extensionProtocol = new URL(browser.extension.getURL("")).protocol; |
| 34 | 34 |
| 35 // Chrome can't distinguish between OBJECT_SUBREQUEST and OBJECT requests. | 35 // Chrome can't distinguish between OBJECT_SUBREQUEST and OBJECT requests. |
| 36 if (!browser.webRequest.ResourceType || | 36 if (!browser.webRequest.ResourceType || |
| 37 !("OBJECT_SUBREQUEST" in browser.webRequest.ResourceType)) | 37 !("OBJECT_SUBREQUEST" in browser.webRequest.ResourceType)) |
| 38 { | 38 { |
| 39 RegExpFilter.typeMap.OBJECT_SUBREQUEST = RegExpFilter.typeMap.OBJECT; | 39 RegExpFilter.typeMap.OBJECT_SUBREQUEST = RegExpFilter.typeMap.OBJECT; |
| (...skipping 28 matching lines...) Expand all Loading... |
| 68 | 68 |
| 69 // WEBRTC gets addressed through a workaround, even if the webRequest API is | 69 // WEBRTC gets addressed through a workaround, even if the webRequest API is |
| 70 // lacking support to block this kind of a request. | 70 // lacking support to block this kind of a request. |
| 71 yield "WEBRTC"; | 71 yield "WEBRTC"; |
| 72 | 72 |
| 73 // POPUP, CSP and ELEMHIDE filters aren't mapped to resource types. | 73 // POPUP, CSP and ELEMHIDE filters aren't mapped to resource types. |
| 74 yield "POPUP"; | 74 yield "POPUP"; |
| 75 yield "ELEMHIDE"; | 75 yield "ELEMHIDE"; |
| 76 yield "CSP"; | 76 yield "CSP"; |
| 77 }()); | 77 }()); |
| 78 |
| 79 function getDocumentInfo(page, frame, originUrl) |
| 80 { |
| 81 return [ |
| 82 extractHostFromFrame(frame, originUrl), |
| 83 getKey(page, frame, originUrl), |
| 84 !!checkWhitelisted(page, frame, originUrl, |
| 85 RegExpFilter.typeMap.GENERICBLOCK) |
| 86 ]; |
| 87 } |
| 88 |
| 89 function matchRequest(url, type, docDomain, sitekey, specificOnly) |
| 90 { |
| 91 let thirdParty = isThirdParty(url, docDomain); |
| 92 let filter = defaultMatcher.matchesAny(url.href, RegExpFilter.typeMap[type], |
| 93 docDomain, thirdParty, |
| 94 sitekey, specificOnly); |
| 95 return [filter, thirdParty]; |
| 96 } |
| 78 | 97 |
| 79 function getRelatedTabIds(details) | 98 function getRelatedTabIds(details) |
| 80 { | 99 { |
| 81 // This is the common case, the request is associated with a single tab. | 100 // This is the common case, the request is associated with a single tab. |
| 82 // If tabId is -1, its not (e.g. the request was sent by | 101 // If tabId is -1, its not (e.g. the request was sent by |
| 83 // a Service/Shared Worker) and we have to identify the related tabs. | 102 // a Service/Shared Worker) and we have to identify the related tabs. |
| 84 if (details.tabId != -1) | 103 if (details.tabId != -1) |
| 85 return Promise.resolve([details.tabId]); | 104 return Promise.resolve([details.tabId]); |
| 86 | 105 |
| 87 let url; // Firefox provides "originUrl" indicating the | 106 let url; // Firefox provides "originUrl" indicating the |
| 88 if (details.originUrl) // URL of the tab that caused this request. | 107 if (details.originUrl) // URL of the tab that caused this request. |
| 89 url = details.originUrl; // In case of Service/Shared Worker, this is the | 108 url = details.originUrl; // In case of Service/Shared Worker, this is the |
| 90 // URL of the tab that caused the worker to spawn. | 109 // URL of the tab that caused the worker to spawn. |
| 91 | 110 |
| 92 else if (details.initiator) // Chromium >=63 provides "intiator" which | 111 else if (details.initiator) // Chromium >=63 provides "intiator" which |
| 93 url = details.initiator + "/*"; // is equivalent to "originUrl" on Firefox | 112 url = details.initiator + "/*"; // is equivalent to "originUrl" on Firefox |
| 94 // except that its not a full URL but just | 113 // except that its not a full URL but just |
| 95 // an origin (proto + host). | 114 // an origin (proto + host). |
| 96 else | 115 else |
| 97 return Promise.resolve([]); | 116 return Promise.resolve([]); |
| 98 | 117 |
| 99 return browser.tabs.query({url}).then(tabs => tabs.map(tab => tab.id)); | 118 return browser.tabs.query({url}).then(tabs => tabs.map(tab => tab.id)); |
| 100 } | 119 } |
| 101 | 120 |
| 102 function logRequest(details, url, type, docDomain, thirdParty, | 121 function logRequest(tabIds, request, filter) |
| 103 sitekey, specificOnly, filter) | 122 { |
| 104 { | 123 if (filter) |
| 105 getRelatedTabIds(details).then(tabIds => | 124 FilterNotifier.emit("filter.hitCount", filter, 0, 0, tabIds); |
| 106 { | 125 |
| 107 if (filter) | 126 hitLoggerLogRequest(tabIds, request, filter); |
| 108 FilterNotifier.emit("filter.hitCount", filter, 0, 0, tabIds); | |
| 109 | |
| 110 hitLoggerLogRequest( | |
| 111 tabIds, url, type, docDomain, | |
| 112 thirdParty, sitekey, | |
| 113 specificOnly, filter | |
| 114 ); | |
| 115 }); | |
| 116 } | 127 } |
| 117 | 128 |
| 118 browser.webRequest.onBeforeRequest.addListener(details => | 129 browser.webRequest.onBeforeRequest.addListener(details => |
| 119 { | 130 { |
| 120 // Never block top-level documents. | 131 // Never block top-level documents. |
| 121 if (details.type == "main_frame") | 132 if (details.type == "main_frame") |
| 122 return; | 133 return; |
| 123 | 134 |
| 124 // Filter out requests from non web protocols. Ideally, we'd explicitly | 135 // Filter out requests from non web protocols. Ideally, we'd explicitly |
| 125 // specify the protocols we are interested in (i.e. http://, https://, | 136 // specify the protocols we are interested in (i.e. http://, https://, |
| 126 // ws:// and wss://) with the url patterns, given below, when adding this | 137 // ws:// and wss://) with the url patterns, given below, when adding this |
| 127 // listener. But unfortunately, Chrome <=57 doesn't support the WebSocket | 138 // listener. But unfortunately, Chrome <=57 doesn't support the WebSocket |
| 128 // protocol and is causing an error if it is given. | 139 // protocol and is causing an error if it is given. |
| 129 let url = new URL(details.url); | 140 let url = new URL(details.url); |
| 130 if (url.protocol != "http:" && url.protocol != "https:" && | 141 if (url.protocol != "http:" && url.protocol != "https:" && |
| 131 url.protocol != "ws:" && url.protocol != "wss:") | 142 url.protocol != "ws:" && url.protocol != "wss:") |
| 132 return; | 143 return; |
| 133 | 144 |
| 134 // Firefox provides us with the full origin URL, while Chromium (>=63) | 145 // Firefox provides us with the full origin URL, while Chromium (>=63) |
| 135 // provides only the protocol + host of the (top-level) document which | 146 // provides only the protocol + host of the (top-level) document which |
| 136 // the request originates from through the "initiator" property. | 147 // the request originates from through the "initiator" property. |
| 137 let originUrl = details.originUrl ? new URL(details.originUrl) : | 148 let originUrl = details.originUrl ? new URL(details.originUrl) : |
| 138 details.initiator ? new URL(details.initiator) : null; | 149 details.initiator ? new URL(details.initiator) : null; |
| 139 | 150 |
| 140 // Ignore requests sent by extensions or by the browser itself: | 151 // Ignore requests sent by extensions or by Firefox itself: |
| 141 // * Firefox intercepts requests sent by any extensions, indicated with | 152 // * Firefox intercepts requests sent by any extensions, indicated with |
| 142 // an "originURL" starting with "moz-extension:". | 153 // an "originURL" starting with "moz-extension:". |
| 143 // * Chromium intercepts requests sent by this extension only, indicated | 154 // * Chromium intercepts requests sent by this extension only, indicated |
| 144 // on Chromium >=63 with an "initiator" starting with "chrome-extension:". | 155 // on Chromium >=63 with an "initiator" starting with "chrome-extension:". |
| 145 // * On Firefox, requests that don't relate to any document or extension are | 156 // * On Firefox, requests that don't relate to any document or extension are |
| 146 // indicated with an "originUrl" starting with "chrome:". | 157 // indicated with an "originUrl" starting with "chrome:". |
| 147 // * On Chromium >=63, requests that don't relate to any document or extension | 158 if (originUrl && (originUrl.protocol == extensionProtocol || |
| 148 // have no "initiator". But since on older Chromium versions, no request | 159 originUrl.protocol == "chrome:")) |
| 149 // has an "initiator", we have to check for the tabId as well. | 160 return; |
| 150 if (originUrl) | 161 |
| 162 let page = new ext.Page({id: details.tabId}); |
| 163 let frame = ext.getFrame( |
| 164 details.tabId, |
| 165 // We are looking for the frame that contains the element which |
| 166 // has triggered this request. For most requests (e.g. images) we |
| 167 // can just use the request's frame ID, but for subdocument requests |
| 168 // (e.g. iframes) we must instead use the request's parent frame ID. |
| 169 details.type == "sub_frame" ? details.parentFrameId : details.frameId |
| 170 ); |
| 171 |
| 172 // On Chromium >= 63, if both the frame is unknown and we haven't get |
| 173 // an "initator", this implies a request sent by the browser itself |
| 174 // (on older versions of Chromium, due to the lack of "initator", |
| 175 // this can also indicate a request sent by a Shared/Service Worker). |
| 176 if (!frame && !originUrl) |
| 177 return; |
| 178 |
| 179 if (checkWhitelisted(page, frame, originUrl)) |
| 180 return; |
| 181 |
| 182 let type = resourceTypes.get(details.type) || "OTHER"; |
| 183 let [docDomain, sitekey, specificOnly] = getDocumentInfo(page, frame, |
| 184 originUrl); |
| 185 let [filter, thirdParty] = matchRequest(url, type, docDomain, |
| 186 sitekey, specificOnly); |
| 187 |
| 188 getRelatedTabIds(details).then(tabIds => |
| 151 { | 189 { |
| 152 if (originUrl.protocol == extensionProtocol || | 190 logRequest( |
| 153 originUrl.protocol == "chrome:") | 191 tabIds, |
| 154 return; | 192 {url: details.url, type, docDomain, thirdParty, sitekey, specificOnly}, |
| 155 } | 193 filter |
| 156 else if (details.tabId == -1) | |
| 157 return; | |
| 158 | |
| 159 let page = null; | |
| 160 let frame = null; | |
| 161 if (details.tabId != -1) | |
| 162 { | |
| 163 page = new ext.Page({id: details.tabId}); | |
| 164 frame = ext.getFrame( | |
| 165 details.tabId, | |
| 166 // We are looking for the frame that contains the element which | |
| 167 // has triggered this request. For most requests (e.g. images) we | |
| 168 // can just use the request's frame ID, but for subdocument requests | |
| 169 // (e.g. iframes) we must instead use the request's parent frame ID. | |
| 170 details.type == "sub_frame" ? details.parentFrameId : details.frameId | |
| 171 ); | 194 ); |
| 172 } | 195 }); |
| 173 | |
| 174 if (checkWhitelisted(page, frame, originUrl)) | |
| 175 return; | |
| 176 | |
| 177 let urlString = stringifyURL(url); | |
| 178 let type = resourceTypes.get(details.type) || "OTHER"; | |
| 179 let docDomain = extractHostFromFrame(frame, originUrl); | |
| 180 let thirdParty = isThirdParty(url, docDomain); | |
| 181 let sitekey = getKey(page, frame, originUrl); | |
| 182 let specificOnly = !!checkWhitelisted(page, frame, originUrl, | |
| 183 RegExpFilter.typeMap.GENERICBLOCK); | |
| 184 | |
| 185 let filter = defaultMatcher.matchesAny( | |
| 186 urlString, RegExpFilter.typeMap[type], | |
| 187 docDomain, thirdParty, sitekey, specificOnly | |
| 188 ); | |
| 189 | |
| 190 logRequest(details, urlString, type, docDomain, | |
| 191 thirdParty, sitekey, specificOnly, filter); | |
| 192 | 196 |
| 193 if (filter instanceof BlockingFilter) | 197 if (filter instanceof BlockingFilter) |
| 194 return {cancel: true}; | 198 return {cancel: true}; |
| 195 }, {urls: ["<all_urls>"]}, ["blocking"]); | 199 }, {urls: ["<all_urls>"]}, ["blocking"]); |
| 196 | 200 |
| 197 port.on("filters.collapse", (message, sender) => | 201 port.on("filters.collapse", (message, sender) => |
| 198 { | 202 { |
| 199 if (checkWhitelisted(sender.page, sender.frame)) | 203 let {page, frame} = sender; |
| 204 |
| 205 if (checkWhitelisted(page, frame)) |
| 200 return false; | 206 return false; |
| 201 | 207 |
| 202 let typeMask = RegExpFilter.typeMap[message.mediatype]; | |
| 203 let documentHost = extractHostFromFrame(sender.frame); | |
| 204 let sitekey = getKey(sender.page, sender.frame); | |
| 205 let blocked = false; | 208 let blocked = false; |
| 206 | 209 let [docDomain, sitekey, specificOnly] = getDocumentInfo(page, frame); |
| 207 let specificOnly = checkWhitelisted( | |
| 208 sender.page, sender.frame, null, | |
| 209 RegExpFilter.typeMap.GENERICBLOCK | |
| 210 ); | |
| 211 | 210 |
| 212 for (let url of message.urls) | 211 for (let url of message.urls) |
| 213 { | 212 { |
| 214 let urlObj = new URL(url, message.baseURL); | 213 let [filter] = matchRequest(new URL(url, message.baseURL), |
| 215 let filter = defaultMatcher.matchesAny( | 214 message.mediatype, docDomain, |
| 216 stringifyURL(urlObj), | 215 sitekey, specificOnly); |
| 217 typeMask, documentHost, | |
| 218 isThirdParty(urlObj, documentHost), | |
| 219 sitekey, specificOnly | |
| 220 ); | |
| 221 | 216 |
| 222 if (filter instanceof BlockingFilter) | 217 if (filter instanceof BlockingFilter) |
| 223 { | 218 { |
| 224 if (filter.collapse != null) | 219 if (filter.collapse != null) |
| 225 return filter.collapse; | 220 return filter.collapse; |
| 226 blocked = true; | 221 blocked = true; |
| 227 } | 222 } |
| 228 } | 223 } |
| 229 | 224 |
| 230 return blocked && Prefs.hidePlaceholders; | 225 return blocked && Prefs.hidePlaceholders; |
| 231 }); | 226 }); |
| 232 | 227 |
| 228 port.on("request.blockedByRTCWrapper", (msg, sender) => |
| 229 { |
| 230 let {page, frame} = sender; |
| 231 |
| 232 if (checkWhitelisted(page, frame)) |
| 233 return false; |
| 234 |
| 235 let {url} = msg; |
| 236 let [docDomain, sitekey, specificOnly] = getDocumentInfo(page, frame); |
| 237 let [filter, thirdParty] = matchRequest(new URL(url), "WEBRTC", docDomain, |
| 238 sitekey, specificOnly); |
| 239 logRequest( |
| 240 [sender.page.id], |
| 241 {url, type: "WEBRTC", docDomain, thirdParty, sitekey, specificOnly}, |
| 242 filter |
| 243 ); |
| 244 |
| 245 return filter instanceof BlockingFilter; |
| 246 }); |
| 247 |
| 233 let ignoreFilterNotifications = false; | 248 let ignoreFilterNotifications = false; |
| 249 let handlerBehaviorChangedQuota = |
| 250 browser.webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES; |
| 251 |
| 252 function propagateHandlerBehaviorChange() |
| 253 { |
| 254 // Make sure to not call handlerBehaviorChanged() more often than allowed |
| 255 // by browser.webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES. |
| 256 // Otherwise Chrome notifies the user that this extension is causing issues. |
| 257 if (handlerBehaviorChangedQuota > 0) |
| 258 { |
| 259 browser.webNavigation.onBeforeNavigate.removeListener( |
| 260 propagateHandlerBehaviorChange |
| 261 ); |
| 262 browser.webRequest.handlerBehaviorChanged(); |
| 263 handlerBehaviorChangedQuota--; |
| 264 setTimeout(() => { handlerBehaviorChangedQuota++; }, 600000); |
| 265 } |
| 266 } |
| 234 | 267 |
| 235 function onFilterChange(arg, isDisabledAction) | 268 function onFilterChange(arg, isDisabledAction) |
| 236 { | 269 { |
| 237 // Avoid triggering filters.behaviorChanged multiple times | 270 // Avoid triggering filters.behaviorChanged multiple times |
| 238 // when multiple filter hanges happen at the same time. | 271 // when multiple filter hanges happen at the same time. |
| 239 if (ignoreFilterNotifications) | 272 if (ignoreFilterNotifications) |
| 240 return; | 273 return; |
| 241 | 274 |
| 242 // Ignore disabled subscriptions and filters, unless they just got | 275 // Ignore disabled subscriptions and filters, unless they just got |
| 243 // disabled, otherwise they have no effect on the handler behavior. | 276 // disabled, otherwise they have no effect on the handler behavior. |
| 244 if (arg && arg.disabled && !isDisabledAction) | 277 if (arg && arg.disabled && !isDisabledAction) |
| 245 return; | 278 return; |
| 246 | 279 |
| 247 // Ignore empty subscriptions. This includes subscriptions | 280 // Ignore empty subscriptions. This includes subscriptions |
| 248 // that have just been added, but not downloaded yet. | 281 // that have just been added, but not downloaded yet. |
| 249 if (arg instanceof Subscription && arg.filters.length == 0) | 282 if (arg instanceof Subscription && arg.filters.length == 0) |
| 250 return; | 283 return; |
| 251 | 284 |
| 252 // Ignore all types of filters but request filters, | 285 // Ignore all types of filters but request filters, |
| 253 // only these have an effect on the handler behavior. | 286 // only these have an effect on the handler behavior. |
| 254 if (arg instanceof Filter && !(arg instanceof RegExpFilter)) | 287 if (arg instanceof Filter && !(arg instanceof RegExpFilter)) |
| 255 return; | 288 return; |
| 256 | 289 |
| 257 ignoreFilterNotifications = true; | 290 ignoreFilterNotifications = true; |
| 258 setTimeout(() => | 291 setTimeout(() => |
| 259 { | 292 { |
| 293 // Defer handlerBehaviorChanged() until navigation occurs. |
| 294 // There wouldn't be any visible effect when calling it earlier, |
| 295 // but it's an expensive operation and that way we avoid to call |
| 296 // it multiple times, if multiple filters are added/removed. |
| 297 if (!browser.webNavigation.onBeforeNavigate |
| 298 .hasListener(propagateHandlerBehaviorChange)) |
| 299 browser.webNavigation.onBeforeNavigate |
| 300 .addListener(propagateHandlerBehaviorChange); |
| 301 |
| 260 ignoreFilterNotifications = false; | 302 ignoreFilterNotifications = false; |
| 261 ext.webRequest.handlerBehaviorChanged(); | |
| 262 FilterNotifier.emit("filter.behaviorChanged"); | 303 FilterNotifier.emit("filter.behaviorChanged"); |
| 263 }); | 304 }); |
| 264 } | 305 } |
| 265 | 306 |
| 266 FilterNotifier.on("subscription.added", onFilterChange); | 307 FilterNotifier.on("subscription.added", onFilterChange); |
| 267 FilterNotifier.on("subscription.removed", onFilterChange); | 308 FilterNotifier.on("subscription.removed", onFilterChange); |
| 268 FilterNotifier.on("subscription.updated", onFilterChange); | 309 FilterNotifier.on("subscription.updated", onFilterChange); |
| 269 FilterNotifier.on("subscription.disabled", arg => onFilterChange(arg, true)); | 310 FilterNotifier.on("subscription.disabled", arg => onFilterChange(arg, true)); |
| 270 FilterNotifier.on("filter.added", onFilterChange); | 311 FilterNotifier.on("filter.added", onFilterChange); |
| 271 FilterNotifier.on("filter.removed", onFilterChange); | 312 FilterNotifier.on("filter.removed", onFilterChange); |
| 272 FilterNotifier.on("filter.disabled", arg => onFilterChange(arg, true)); | 313 FilterNotifier.on("filter.disabled", arg => onFilterChange(arg, true)); |
| 273 FilterNotifier.on("load", onFilterChange); | 314 FilterNotifier.on("load", onFilterChange); |
| 274 | |
| 275 port.on("request.blockedByRTCWrapper", (msg, sender) => | |
| 276 { | |
| 277 return ext.webRequest.onBeforeRequest._dispatch( | |
| 278 new URL(msg.url), | |
| 279 "webrtc", | |
| 280 sender.page, | |
| 281 sender.frame | |
| 282 ).includes(false); | |
| 283 }); | |
| LEFT | RIGHT |