feat(iframe): adds credentialless attribute for COEP (#113)

justinribeiro · Nov 15, 2024 · 9cb1af2 · 9cb1af2
1 parent 316b2b9
commit 9cb1af2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -296,7 +296,7 @@ export class LiteYTEmbed extends HTMLElement {
       }
 
       const iframeHTML = `
-<iframe frameborder="0" title="${this.videoTitle}"
+<iframe credentialless frameborder="0" title="${this.videoTitle}"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
   src="https://www.youtube${wantsNoCookie}.com/embed/${embedTarget}autoplay=${autoplay}&${this.params}"
 ></iframe>`;

diff --git a/test/lite-youtube.test.ts b/test/lite-youtube.test.ts
@@ -76,7 +76,7 @@ describe('<lite-youtube>', () => {
     expect(el.shadowRoot.querySelector('iframe')).to.be.null;
     el.click();
     expect(el.shadowRoot.querySelector('iframe')).dom.to.equal(
-      '<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
+      '<iframe credentialless frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
     );
   });
 
@@ -85,13 +85,13 @@ describe('<lite-youtube>', () => {
     expect(el.shadowRoot.querySelector('iframe')).to.be.null;
     el.click();
     expect(el.shadowRoot.querySelector('iframe')).dom.to.equal(
-      '<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
+      '<iframe credentialless frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
     );
     el.videoId = 'VZ9VSypxhEQ';
     expect(el.shadowRoot.querySelector('iframe')).to.be.null;
     el.click();
     expect(el.shadowRoot.querySelector('iframe')).dom.to.equal(
-      '<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/VZ9VSypxhEQ?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
+      '<iframe credentialless frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/VZ9VSypxhEQ?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
     );
   });
 
@@ -100,13 +100,13 @@ describe('<lite-youtube>', () => {
     expect(el.shadowRoot.querySelector('iframe')).to.be.null;
     el.click();
     expect(el.shadowRoot.querySelector('iframe')).dom.to.equal(
-      '<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
+      '<iframe credentialless frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
     );
     el.playlistId = 'PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9';
     expect(el.shadowRoot.querySelector('iframe')).to.be.null;
     el.click();
     expect(el.shadowRoot.querySelector('iframe')).dom.to.equal(
-      '<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/?listType=playlist&amp;list=PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9&amp;autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
+      '<iframe credentialless frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/?listType=playlist&amp;list=PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9&amp;autoplay=1&amp;start=0&amp;null" title="Test Me"></iframe>',
     );
   });
 
@@ -134,7 +134,7 @@ describe('<lite-youtube>', () => {
     );
     el.click();
     expect(el.shadowRoot.querySelector('iframe')).dom.to.equal(
-      '<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Video"></iframe>',
+      '<iframe credentialless frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/guJLfqTFfIw?autoplay=1&amp;start=0&amp;null" title="Video"></iframe>',
     );
   });