embed tag src attribute prepends unsafe: in ember js

Question

I am trying to use an embed tag and provided a dynamic url for the src attribute

<embed src="{{mediaUrl}}" type="{{mimeType}}"  />

But when the page is opened I get

<embed src="unsafe:abc/def.mp4" type="video/mp4"  />

• I changed permissions of CSP including media-src, child-src, etc
• I gave complete permissions(*)
• I removed all permissions
• Finally I removed "ember-cli-content-security-policy" altogether even then the prepending of unsafe: could not be avoided.

Removing "ember-cli-content-security-policy" however did not block the url anymore but the url was still prepended with unsafe and because of which the video was not loaded

What else I tried:

• Used a ember component with tag as embed and src and type attribute-binded and used html.safestring. Result: unsafe: was still prepended

• Added the url to the src attribute after component was rendered(did not show video even though unsafe: was not prepended because I believe embed src tag cannot be changed)

• Added the entire after component was rended and now it worked.

But this is not something I want, I want it to be part of template and not inserted dynamically

Answer 1

I had the same problem and I solved it by using this helper :

// app/helpers/safe-string.js
import Ember from 'ember';

export function safeString(value) {
  return Ember.String.htmlSafe(value)
}

export default Ember.Helper.helper(safeString);

You can now do :

<embed src="{{safe-string mediaUrl}}" type="{{mimeType}}"  />