Setting iframe src via JS isnt working specifically for sharepoint

Setting src directly in iframe is working as expected

I'm trying to embed a Sharepoint document here.

For eg

<iframe src="https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&amp;action=embedview"
      width="476px"
      height="288px" />

Whereas when I set the src in the script it's failing

<iframe id="x" width="476px" height="288px"></iframe>

<script>
document.getElementById('x').src = "https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&amp;action=embedview";
</script>

This happens explicitly with SharePoint. So I would like to understand a couple of things here.

1. Am I doing something wrong?
2. Is there any CSP headers which block the parent from adding via JS?
3. Is there any official way from SharePoint to allow this? 
3. Is there any way to hack this?

Thanks in advance.

Since this happens across chrome, safari and firefox I think it's not a bug in a specific browser.

from Setting iframe src via JS isnt working specifically for sharepoint