Blocked script execution

[callmesoul]

import { Replayer } from 'rrweb'
const replayer = new Replayer(this.error.records);
replayer.play();

报错：

Blocked script execution in 'http://localhost:8080/error/57' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

用的vue框架

[Yuyz0112]

Hi @callmesoul, this is the expected behavior of the replay sandbox. The design doc explained why we are not going to execute scripts, there is also a Chinese version of the design doc.

If your replayer is not working correctly, there may be some other bugs which are not related to this error message, you can provide the events log and I will try to debug it:)

[callmesoul]

my event log:

[{"type":0,"data":{},"timestamp":1557039017570},{"type":1,"data":{},"timestamp":1557039017894},{"type":4,"data":{"href":"http://localhost:63342/frontend-sniper-explorer/dist/index.html?_ijt=kr3a109m4fkjpc8fua9b5itbb3","width":844,"height":937},"timestamp":1557039017894},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{"lang":"en"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":2,"tagName":"meta","attributes":{"charset":"UTF-8"},"childNodes":[],"id":5},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Title","id":7}],"id":6},{"type":2,"tagName":"script","attributes":{"type":"text/javascript","src":"http://localhost:63342/frontend-sniper-explorer/dist/frontend-sniper-explorer.js"},"childNodes":[],"id":8}],"id":4},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":2,"tagName":"img","attributes":{"src":"http://localhost:63342/frontend-sniper-explorer/sdsda/asdsd.jpg"},"childNodes":[],"id":10},{"type":3,"textContent":" ","id":11},{"type":2,"tagName":"button","attributes":{},"childNodes":[{"type":3,"textContent":"123","id":13}],"id":12},{"type":3,"textContent":" ","id":14},{"type":2,"tagName":"button","attributes":{"onclick":"test()"},"childNodes":[{"type":3,"textContent":"456","id":16}],"id":15},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":18}],"id":17}],"id":9}],"id":3}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1557039017896},{"type":3,"data":{"source":1,"positions":[{"x":654,"y":172,"id":3,"timeOffset":0}]},"timestamp":1557039017899},{"type":3,"data":{"source":1,"positions":[{"x":815,"y":147,"id":3,"timeOffset":-446}]},"timestamp":1557039018399},{"type":3,"data":{"source":1,"positions":[{"x":821,"y":238,"id":3,"timeOffset":0}]},"timestamp":1557039024465},{"type":3,"data":{"source":1,"positions":[{"x":592,"y":297,"id":3,"timeOffset":-445},{"x":473,"y":313,"id":3,"timeOffset":-389},{"x":435,"y":313,"id":3,"timeOffset":-333},{"x":371,"y":310,"id":3,"timeOffset":-277},{"x":360,"y":305,"id":3,"timeOffset":-221},{"x":353,"y":300,"id":3,"timeOffset":-165},{"x":341,"y":297,"id":3,"timeOffset":-109},{"x":328,"y":297,"id":3,"timeOffset":-53}]},"timestamp":1557039024966},{"type":3,"data":{"source":2,"type":1,"id":3,"x":319,"y":303},"timestamp":1557039025106},{"type":3,"data":{"source":2,"type":0,"id":3,"x":319,"y":305},"timestamp":1557039025225},{"type":3,"data":{"source":2,"type":2,"id":3,"x":319,"y":305},"timestamp":1557039025225},{"type":3,"data":{"source":2,"type":1,"id":3,"x":331,"y":336},"timestamp":1557039025377},{"type":3,"data":{"source":1,"positions":[{"x":321,"y":298,"id":3,"timeOffset":-499},{"x":319,"y":300,"id":3,"timeOffset":-387},{"x":319,"y":304,"id":3,"timeOffset":-283},{"x":319,"y":307,"id":3,"timeOffset":-179},{"x":327,"y":326,"id":3,"timeOffset":-123},{"x":334,"y":345,"id":3,"timeOffset":-67},{"x":342,"y":355,"id":3,"timeOffset":-12}]},"timestamp":1557039025468},{"type":3,"data":{"source":2,"type":0,"id":3,"x":344,"y":358},"timestamp":1557039025513},{"type":3,"data":{"source":2,"type":2,"id":3,"x":344,"y":358},"timestamp":1557039025513},{"type":3,"data":{"source":1,"positions":[{"x":345,"y":360,"id":3,"timeOffset":-448},{"x":347,"y":362,"id":3,"timeOffset":-392},{"x":373,"y":360,"id":3,"timeOffset":-87},{"x":277,"y":292,"id":3,"timeOffset":-32}]},"timestamp":1557039025969},{"type":3,"data":{"source":1,"positions":[{"x":229,"y":252,"id":3,"timeOffset":-477},{"x":143,"y":176,"id":3,"timeOffset":-421},{"x":127,"y":155,"id":3,"timeOffset":-357},{"x":115,"y":125,"id":3,"timeOffset":-276},{"x":98,"y":107,"id":3,"timeOffset":-218},{"x":85,"y":92,"id":3,"timeOffset":-165},{"x":71,"y":81,"id":3,"timeOffset":-109},{"x":64,"y":73,"id":3,"timeOffset":-51}]},"timestamp":1557039026470},{"type":3,"data":{"source":2,"type":1,"id":12,"x":47,"y":26},"timestamp":1557039026970},{"type":3,"data":{"source":2,"type":5,"id":12},"timestamp":1557039026970},{"type":3,"data":{"source":1,"positions":[{"x":62,"y":64,"id":3,"timeOffset":-498},{"x":60,"y":56,"id":3,"timeOffset":-426},{"x":53,"y":46,"id":3,"timeOffset":-370},{"x":52,"y":37,"id":3,"timeOffset":-314},{"x":50,"y":33,"id":3,"timeOffset":-258},{"x":49,"y":31,"id":3,"timeOffset":-186},{"x":49,"y":29,"id":12,"timeOffset":-135}]},"timestamp":1557039026971},{"type":3,"data":{"source":2,"type":0,"id":12,"x":47,"y":26},"timestamp":1557039027081},{"type":3,"data":{"source":2,"type":2,"id":12,"x":47,"y":26},"timestamp":1557039027082},{"type":3,"data":{"source":1,"positions":[{"x":48,"y":26,"id":12,"timeOffset":-255},{"x":89,"y":72,"id":3,"timeOffset":-198},{"x":99,"y":83,"id":3,"timeOffset":-127},{"x":116,"y":113,"id":3,"timeOffset":-71}]},"timestamp":1557039027472},{"type":3,"data":{"source":2,"type":1,"id":3,"x":136,"y":136},"timestamp":1557039027636},{"type":3,"data":{"source":2,"type":6,"id":12},"timestamp":1557039027636},{"type":3,"data":{"source":2,"type":0,"id":3,"x":136,"y":136},"timestamp":1557039027737},{"type":3,"data":{"source":2,"type":2,"id":3,"x":136,"y":136},"timestamp":1557039027737},{"type":3,"data":{"source":1,"positions":[{"x":127,"y":130,"id":3,"timeOffset":-479},{"x":137,"y":136,"id":3,"timeOffset":-178},{"x":122,"y":89,"id":3,"timeOffset":-123},{"x":114,"y":69,"id":3,"timeOffset":-59},{"x":114,"y":64,"id":3,"timeOffset":-3}]},"timestamp":1557039027972},{"type":3,"data":{"source":1,"positions":[{"x":111,"y":36,"id":3,"timeOffset":-448},{"x":109,"y":29,"id":15,"timeOffset":-392},{"x":109,"y":25,"id":15,"timeOffset":-336},{"x":109,"y":22,"id":15,"timeOffset":-280},{"x":107,"y":19,"id":15,"timeOffset":-224},{"x":105,"y":18,"id":15,"timeOffset":-168},{"x":96,"y":16,"id":15,"timeOffset":-112},{"x":90,"y":15,"id":15,"timeOffset":-16}]},"timestamp":1557039028473},{"type":3,"data":{"source":2,"type":1,"id":15,"x":90,"y":15},"timestamp":1557039028578},{"type":3,"data":{"source":2,"type":5,"id":15},"timestamp":1557039028578},{"type":3,"data":{"source":2,"type":0,"id":15,"x":90,"y":15},"timestamp":1557039028681},{"type":3,"data":{"source":2,"type":2,"id":15,"x":90,"y":15},"timestamp":1557039028681}]

[Yuyz0112]

@callmesoul I've tried to replay the events and looks like it can show your interactions.

[callmesoul]

i think becase i use Vue .
how you add iframe?
in vue page,i only import and use.
i can't see how to add iframe
@Yuyz0112

[callmesoul]

i try it again.
it can throw error and is run normal

[MSohailMemon]

Hi @Yuyz0112, I need your help. My website is build on Angular 6 and I am creating an extension to record and replay testruns on my website. I am able to record events but I am not able to play them. When I inject the rrwebPlayer script it gives this error:
"Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."

Can you please help me out?

Thanks

[Yuyz0112]

@MSohailMemon could you share your recorded events for debugging?

[MSohailMemon]

events-data.txt
Hi @Yuyz0112 please see the events-data.txt file attached. Now I am receiving different error. I have attached screenshot of errors too.

I am bit confused about why the recorded events are being played in iframe with blocked scripts? By this, it not performing automation instead, it is just behaving like playing a video we have recorded. What I am looking for is that we can record a scenario/testrun once then play it back anytime as automation. Does it seem achievable?

[Yuyz0112]

@MSohailMemon The warning message may point to some bug of recording, are you trying with the latest release(0.7.16)? If so, I will try to reproduce the bug.

BTW, you are right. rrweb was designed to playing like a video, not an automation tool. You may check this doc if you want to know it more.
With this strategy, we can safely replay the recorded scene, not actions.

For example, if you have a TODO list. When you are recording there is one TODO item, and you resolved it. And when you replay, if we are really visiting the website again, you may found there is no TODO item and everything failed.

[shekharsom]

Is there a way to not show these messages? some kind of option parameter?

[nfrederick023]

Here's a workaround.

const rrwebPlayer = new rrwebPlayer({ ...parameters }); 
const iframe = document.getElementsByTagName("iframe")[0];
iframe.removeAttribute("sandbox");
iframe.contentWindow.location.reload();

1. Create the rrweb player.
2. Immediately grab the iframe element created by the rrweb player.
3. Remove the sandbox attribute (ie allow script execution)
4. Reload the iframe page for the changes to take effect.

Note, you can keep the sandbox attribute, while enabling script execution, if you do this instead of removeAttribute:

iframe.sandbox = iframe.sandbox + " allow-scripts");

PRO-TIP:

If you need to do anything else after reloading the iframe (eg injecting fonts), you can do this:

iframe.addEventListener("load", () => {
    // ...do something
    // fires when the iframe is finished reloading
})

To rrweb devs: please add an option to enable script execution!!