[innerHTML] rip off script tag?

Ionic Framework ionic-v3
1

Hello sir, I’m right now build a mobile app using a JSON API from my blog at wordpress…

I usually upload a photo to Instagram and embed it to my blog…

Now I cannot see my photo from embed tag from Instagram…

I’m using a [innerHTML] to make my data from JSON API look like a html…
But I realize, js who responsible to load my photo from Instagram is missing…

Is the [innerHTML] rip them of from my json ??

Here’s for comparison

This is the JSON data that contain <script>

image
Untitled.png1366×768 148 KB

Here is the element that shown on the app after the content passed the [innerHTML]

image
Untitled.png1366×768 153 KB

Is this problem solveable ? or I need change the [innerHTML] to another function ??

Any response apriciated :wink:

2

By native this is an angular 2 security feature,

please go through this
Preventing cross-site scripting (XSS)

it’s better find an alternate way

3

Can you give me an example of the alternative way ?

4

You need to bypass html sanitization.
Take a look at: Inserting HTML via Angular 2: Use of DomSanitizationService & bypassSecurityTrustHtml

5

so I need to make a service right ? and copy your code to make the angular let Instagram script going through ??

6

I already make the pipes file…

But I now can show the style, but it’s still not load the photo (I think the <script> still get sanitize)…

It look like this…

image
image1366×768 321 KB

*note : I’m just using the html safe-pipe like this
<div [innerHTML]="post?.post?.content | safe: 'html'"></div>

Any reply apriciated :wink:

*EDIT… It happen because the embed code is look like this…

<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="7">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 28.1944444444% 0; text-align: center; width: 100%;"></div>
<p style="margin: 8px 0 0 0; padding: 0 4px;"><a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BLANyeyDZiJ/" target="_blank">Let the adventure begin ! #travel</a></p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">A video posted by M Argus Chopin Gyver (@macgwik) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-10-01T02:22:04+00:00">Sep 30, 2016 at 7:22pm PDT</time></p>

</div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

And I thought, the one that get trusted, only the <blockqoute>. and the <script> still get sanitized