Add allow-scripts prop to sl-include

docs/assets/examples/include.html

@@ -3,3 +3,7 @@
 </p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla urna porttitor rhoncus dolor purus non enim. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Gravida in fermentum et sollicitudin.</p>
 <p>Cursus sit amet dictum sit amet justo donec enim. Sed id semper risus in hendrerit gravida. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Nec ullamcorper sit amet risus nullam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lorem donec massa sapien faucibus et molestie. A cras semper auctor neque vitae.</p>
+
+<script>
+  console.log('This will only execute if the `allow-scripts` prop is present');
+</script>

docs/getting-started/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `sl-format-date` component
 - Added `indeterminate` state to `sl-progress-bar` [#274](https://github.com/shoelace-style/shoelace/issues/274)
 - Added `--track-color`, `--indicator-color`, and `--label-color` to `sl-progress-bar` [#276](https://github.com/shoelace-style/shoelace/issues/276)
+- Added `allow-scripts` prop to `sl-include` [#280](https://github.com/shoelace-style/shoelace/issues/280)
 - Fixed a bug where `sl-menu-item` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
 - Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
 - Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `sl-form` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)

src/components.d.ts

@@ -630,6 +630,10 @@ export namespace Components {
         "position": number;
     }
     interface SlInclude {
+        /**
+          * Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this option can lead to XSS vulnerabilities in your app!
+         */
+        "allowScripts": boolean;
         /**
           * The fetch mode to use.
          */
@@ -2320,6 +2324,10 @@ declare namespace LocalJSX {
         "position"?: number;
     }
     interface SlInclude {
+        /**
+          * Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this option can lead to XSS vulnerabilities in your app!
+         */
+        "allowScripts"?: boolean;
         /**
           * The fetch mode to use.
          */

src/components/include/include.tsx

@@ -22,6 +22,12 @@ export class Include {
   /** The fetch mode to use. */
   @Prop() mode: 'cors' | 'no-cors' | 'same-origin' = 'cors';
 
+  /**
+   * Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this
+   * option can lead to XSS vulnerabilities in your app!
+   */
+  @Prop() allowScripts = false;
+
   /** Emitted when the included file is loaded. */
   @Event({ eventName: 'sl-load' }) slLoad: EventEmitter;
 
@@ -37,6 +43,14 @@ export class Include {
     this.loadSource();
   }
 
+  executeScript(script: HTMLScriptElement) {
+    // Create a copy of the script and swap it out so the browser executes it
+    const newScript = document.createElement('script');
+    [...script.attributes].map(attr => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+
   async loadSource() {
     try {
       const src = this.src;
@@ -53,6 +67,11 @@ export class Include {
       }
 
       this.host.innerHTML = file.html;
+
+      if (this.allowScripts) {
+        [...this.host.querySelectorAll('script')].map(script => this.executeScript(script));
+      }
+
       this.slLoad.emit();
     } catch {
       this.slError.emit();