Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DOM intrusion] Hide visible elements containing sensitive data from browser extensions #383

Open
t2ym opened this issue Aug 22, 2020 · 0 comments
Open

[DOM intrusion] Hide visible elements containing sensitive data from browser extensions #383

t2ym opened this issue Aug 22, 2020 · 0 comments

Comments

@t2ym
Copy link
Owner

t2ym commented Aug 22, 2020 •
edited
Loading

[DOM intrusion] Hide visible elements containing sensitive data from browser extensions

Status - In an early stage of researching

Feature

  • Hide sensitive DOM parts in a closed shadow DOM so that browser extensions cannot access sensitive data

Current Experimental Implementation

  • Define <shadow-container> web component to contain application elements
  • <shadow-container> has a CLOSED Shadow DOM, which is INACCESSIBLE FROM BROWSER EXTENSIONS
  • <shadow-container> contains <template><my-app></my-app><live-localizer></live-localizer></template>
  • <shadow-container> moves elements in the <template> to the closed shadow DOM
  • The moved elements are connected and become active in the shadow DOM
diff --git a/demo/cache-automation.js b/demo/cache-automation.js
index fe224cc6..c766e908 100644
--- a/demo/cache-automation.js
+++ b/demo/cache-automation.js
@@ -15,7 +15,7 @@ async function automationFunction() {
         reject(new Error('timeout for bundle-set-fetched'));
       }
       try {
-        let model = document.querySelector('live-localizer').shadowRoot
+        let model = document.querySelector('shadow-container')._shadowRoot.querySelector('live-localizer').shadowRoot
           .getElementById('main').shadowRoot
           .getElementById('dialog')
           .querySelector('live-localizer-panel').shadowRoot
@@ -39,7 +39,7 @@ async function automationFunction() {
 
   await new Promise(async (resolve, reject) => {
     try {
-      let menuItems = document.querySelector('my-app').shadowRoot
+      let menuItems = document.querySelector('shadow-container')._shadowRoot.querySelector('my-app').shadowRoot
         .children[3] // app-drawer-layout
         .querySelector('app-drawer')
         .querySelector('iron-selector')
diff --git a/demo/mark-parsed.js b/demo/mark-parsed.js
index 35fa9cd8..7bcf0287 100644
--- a/demo/mark-parsed.js
+++ b/demo/mark-parsed.js
@@ -14,4 +14,19 @@ Copyright (c) 2020, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.
   if (self.frameElement) {
     frameElement.dispatchEvent(new Event('srcdoc-load'))
   }
+  class ShadowContainer extends HTMLElement {
+    constructor() {
+      super();
+      this._shadowRoot = this.attachShadow({ mode: "closed" });
+    }
+    connectedCallback() {
+      if (!this._appended) {
+        [...this.querySelector('template').content.childNodes]
+          //.filter(child => !(child.tagName === 'SCRIPT' && child.src.indexOf('/hook.min.js?') >= 0))
+          .forEach(child => this._shadowRoot.appendChild(child));
+        this._appended = true;
+      }
+    }
+  }
+  customElements.define('shadow-container', ShadowContainer);
 }
diff --git a/demo/original-index.html b/demo/original-index.html
index b8e18a58..5dd643a4 100644
--- a/demo/original-index.html
+++ b/demo/original-index.html
@@ -579,7 +579,7 @@ Copyright (c) 2017, 2018, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserv
 
 </head>
 <body>
-
+  <shadow-container><template>
   <my-app></my-app>
 
   <live-localizer>
@@ -607,6 +607,7 @@ Copyright (c) 2017, 2018, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserv
       api-key="AIzaSyCjrlPhl0cLSZVRsDvuajq16vkerhcu_UM">
     </live-localizer-firebase-storage>
   </live-localizer>
+  </template></shadow-container>
   <script src="mark-parsed.js?no-hook=true"></script>
 </body>
 </html>

Notes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@t2ym