"This document requires 'TrustedHTML' assignment."

[Dustin Byers]

Hi all,

I'm trying to use chrome.scripting.executeScript api with a variety of functions that have similar or the same code. I want to avoid having all this duplicate code, so I attempted to dynamically construct function steps by passing stringified functions as `args`. A greatly simplified sample below:

```
async function runSomeFunctions(tabId) {
  const func = async (getElStr, anotherFuncStr) => {
    // Transform the function string into an actual function
    const getElementFromStr = new Function('return ' + getElStr)();
    const anotherFuncFromStr = new Function('return ' + anotherFuncStr)();

    const el = getElementFromStr('div > imput');
    anotherFuncFromStr(el.value);
    return el.value;
  };

  const result = await chrome.scripting.executeScript({
    target: { tabId },
    world: chrome.scripting['ExecutionWorld'].MAIN,
    func,
    args: [getElement.toString(), anotherFunc.toString()],
  });

  return result;
}

```

This generally works, but some sites were causing an error "This document requires 'TrustedHTML' assignment." or "This document requires 'TrustedScript' assignment." I found a workaround in a thread that does work, by adding:
```    if (window.trustedTypes && window.trustedTypes.createPolicy && !window.trustedTypes.defaultPolicy) {

      window.trustedTypes.createPolicy('default', {
        createHTML: string => string,
        // Optional, only needed for script (url) tags
        createScriptURL: string => string,
        createScript: string => string,
      });
    }
```

I'm concerned about this approach since I haven't found a way to remove the policy after I create it and the function is done - not to mention that it might get flagged/denied on submission to CWS. 

I know I can invoke some the functions through messaging to the content script, but I need it to happen in the service worker.

My questions are:

- Would this cause a rejection in CWS?

- If not, are there other risks?

- Is there another performant method to dynamically compose functions?

[Oliver Dunk]

Hi Dustin,

Creating a new policy to inject code on a site with trusted types should be ok. We don't have any policies that this would violate, and I think it is the best approach - certainly better than disabling trusted types entirely.

I would definitely be cautious about constructing functions that way. Could you import helper functions across different files in your source code and then use a bundler to create single files you can inject?

Thanks,

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/177ebbd8-eb92-4ddd-8c91-26abd0ee5020n%40chromium.org.

[Dustin Byers]

Thanks Oliver!

I could, but I thought that might be more of a pain to manage since I can't remove the files after injection, right?

[woxxom]

How is injecting literal code any different? You can't "remove" it either.

If you want to let the GC to get rid of the code when it becomes unused, you can do it in both cases by putting the code inside an IIFE and unregistering the enclosed listeners:

(() => {

  addEventListener('click', foo);

  function foo() {

    if ('allDone') removeEventListener('click', foo);

  }

})();