Allow Extension URLs to load unsandboxed

This may sound like a really bad change to make, however I have some reasons as to why I believe this is perfectly fine:
1. Why is it fine to load text unsandboxed?
There's no difference between a URL extension loading unsandboxed and a text extension using eval to load all of it's code from another website.
2. Sharing & updating convenience
If I made an extension and already had it hosting perfectly fine, I would rather share the link to that hosting than tell everyone to download it and keep coming back to the website incase there is an update. Again, malicious updates would still be possible if a file-loaded extension just used eval & fetch to run all of it's code.

Author: JeremyGamer13

src/components/custom-procedures/custom-procedures.jsx

@@ -4,7 +4,7 @@ import Modal from '../../containers/modal.jsx';
 import Box from '../box/box.jsx';
 import { defineMessages, injectIntl, intlShape, FormattedMessage } from 'react-intl';
 
-import plusIcon from './icon--plus.svg';
+import dropperIcon from './icon--dropper.svg';
 
 import booleanInputIcon from './icon--boolean-input.svg';
 import textInputIcon from './icon--text-input.svg';
@@ -153,7 +153,7 @@ const BlockColorSection = props => (
                     onChange={props.onBlockColorChange}
                 />
                 <img
-                    src={plusIcon}
+                    src={dropperIcon}
                     className={styles.customPlus}
                 />
             </div>

src/components/custom-procedures/icon--dropper.svg

@@ -181,17 +181,20 @@ const CustomExtensionModal = props => (
                             />
                         </p>
                     )}
-                    <p>
-                        <FormattedMessage
-                            // eslint-disable-next-line max-len
-                            defaultMessage="Your browser may not allow PenguinMod to access certain sites. If this is causing issues for you, try loading from a file or text instead."
-                            description="Message that appears in custom extension prompt"
-                            id="pm.customExtensionModal.corsProblem"
-                        />
-                    </p>
                 </React.Fragment>
             )}
 
+            {props.type === 'url' && (
+                <p>
+                    <FormattedMessage
+                        // eslint-disable-next-line max-len
+                        defaultMessage="Your browser may not allow PenguinMod to access certain sites. If this is causing issues for you, try loading from a file or text instead."
+                        description="Message that appears in custom extension prompt"
+                        id="pm.customExtensionModal.corsProblem"
+                    />
+                </p>
+            )}
+
             <label className={styles.checkboxContainer}>
                 <FancyCheckbox
                     className={styles.basicCheckbox}

src/components/custom-procedures/icon--plus.svg

@@ -135,7 +135,7 @@ class ExtensionLibrary extends React.PureComponent {
         }
     }
 
-    handleItemSelect(item) {
+    async handleItemSelect(item) {
         // eslint-disable-next-line no-alert
         // if (item.incompatibleWithScratch && !confirm(this.props.intl.formatMessage(messages.incompatible))) {
         //     return;
@@ -158,8 +158,12 @@ class ExtensionLibrary extends React.PureComponent {
             return;
         }
         const url = (item.extensionURL ? item.extensionURL : extensionId);
-        if (item._unsandboxed && url.startsWith("data:")) {
-            manuallyTrustExtension(url);
+        if (item._unsandboxed) {
+            if (url.startsWith("data:")) {
+                manuallyTrustExtension(url);
+            } else {
+                await this.props.vm.securityManager.canLoadExtensionFromProject(url);
+            }
         }
         if (!item.disabled) {
             if (this.props.vm.extensionManager.isExtensionLoaded(extensionId)) {

src/components/tw-custom-extension-modal/custom-extension-modal.jsx

@@ -6,7 +6,7 @@ import log from '../lib/log';
 import localforage from 'localforage';
 import CustomExtensionModalComponent from '../components/tw-custom-extension-modal/custom-extension-modal.jsx';
 import {closeCustomExtensionModal} from '../reducers/modals';
-import {manuallyTrustExtension, isTrustedExtension} from './tw-security-manager.jsx';
+import {manuallyTrustExtension, isTrustedExtension, isTrustedExtensionOrigin} from './tw-security-manager.jsx';
 
 const generateRandomId = () => {
     const randomChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
@@ -125,7 +125,7 @@ class CustomExtensionModal extends React.Component {
         this.handleClose();
         try {
             const url = await this.getExtensionURL();
-            if (this.state.type !== 'url' && this.state.unsandboxed) {
+            if (this.state.unsandboxed) {
                 manuallyTrustExtension(url);
             }
             if (this.props.swapId) {
@@ -220,12 +220,15 @@ class CustomExtensionModal extends React.Component {
     }
     isUnsandboxed () {
         if (this.state.type === 'url') {
-            return isTrustedExtension(this.state.url);
+            if (isTrustedExtensionOrigin(this.state.url)) return true;
         }
         return this.state.unsandboxed;
     }
     canChangeUnsandboxed () {
-        return this.state.type !== 'url';
+        if (this.state.type === "url" && isTrustedExtensionOrigin(this.state.url)) {
+            return false;
+        }
+        return true;
     }
     handleChangeUnsandboxed (e) {
         this.setState({

src/containers/extension-library.jsx

@@ -16,11 +16,11 @@ const manuallyTrustExtension = url => {
 };
 
 /**
- * Trusted extensions are loaded automatically and without a sandbox.
+ * Trusted URL origins are allowed to load extensions without a sandbox automatically.
  * @param {string} url URL as a string.
  * @returns {boolean} True if the extension can is trusted
  */
-const isTrustedExtension = url => (
+const isTrustedExtensionOrigin = url => (
     // Always trust our official extension repostiory.
     url.startsWith('https://extensions.turbowarp.org/') ||
     url.startsWith('https://extensions.penguinmod.com/') ||
@@ -37,8 +37,14 @@ const isTrustedExtension = url => (
     url.startsWith('http://localhost:5173') || // Local Home or Extensions
     url.startsWith('http://localhost:5174') || // Local Home or Extensions
 
-    extensionsTrustedByUser.has(url)
+    false // ignore this, just makes copy & paste easier
 );
+/**
+ * Trusted extensions are loaded automatically and without a sandbox.
+ * @param {string} url URL as a string.
+ * @returns {boolean} True if the extension can is trusted
+ */
+const isTrustedExtension = url => (isTrustedExtensionOrigin(url) || extensionsTrustedByUser.has(url));
 
 /**
  * Set of fetch resource origins that were manually trusted by the user.
@@ -284,8 +290,10 @@ class TWSecurityManagerComponent extends React.Component {
             return true;
         }
         const { showModal } = await this.acquireModalLock();
-        // for backwards compatibility, allow urls to be unsandboxed
-        // if (url.startsWith('data:')) {
+
+        // we allow all urls to be unsandboxed.
+        // its very likely that people would load any file unsandboxed anyways, theres no safety in blocking it for urls only.
+        // when a file is unsandboxed it can request any website anyways, so its not like its preventing remote updates either.
         const allowed = await showModal(SecurityModals.LoadExtension, {
             url,
             unsandboxed: true,
@@ -304,11 +312,6 @@ class TWSecurityManagerComponent extends React.Component {
             };
         }
         return allowed;
-        // }
-        // return showModal(SecurityModals.LoadExtension, {
-        //     url,
-        //     unsandboxed: false
-        // });
     }
 
     /**
@@ -502,5 +505,6 @@ const ConnectedSecurityManagerComponent = connect(
 export {
     ConnectedSecurityManagerComponent as default,
     manuallyTrustExtension,
-    isTrustedExtension
+    isTrustedExtension,
+    isTrustedExtensionOrigin
 };