How to manipulate history outside of an iframe

Question

I'm writing a simple angular app, and I want to make a browser like thing: a input box user can type url, an iframe to display content of the url, a button which user can press to go back.

I use $sce to ng-src in iframe to accept any website user input. But cannot implement history back function because of CORS problem.

Is there any possibility to achieve it? Thanks

JS

$scope.testurl = $sce.trustAsResourceUrl("http://www.baidu.com");
$scope.backPage = function () {
  var ifr = document.getElementById("myIframe");
  ifr.contentWindow.history.back();
}

HTML

<ion-view view-title="Account">
  <ion-content>
    <div ng-click="backPage()">BACK</div>
    <iframe id="myIframe" style="height:500px;width:100vw" ng-src="{{testurl}}"></iframe>
  </ion-content>
</ion-view>

Error

Error: Blocked a frame with origin "http://localhost:8101" from accessing a cross-origin frame.
    at Error (native)
    at Scope.$scope.backPage (http://localhost:8101/js/controllers.js:32:24)
    at fn (eval at compile (http://localhost:8101/lib/ionic/js/ionic.bundle.js:27638:15), <anonymous>:4:215)
    at http://localhost:8101/lib/ionic/js/ionic.bundle.js:65427:9
    at Scope.$eval (http://localhost:8101/lib/ionic/js/ionic.bundle.js:30395:28)
    at Scope.$apply (http://localhost:8101/lib/ionic/js/ionic.bundle.js:30495:25)
    at HTMLDivElement.<anonymous> (http://localhost:8101/lib/ionic/js/ionic.bundle.js:65426:13)
    at defaultHandlerWrapper (http://localhost:8101/lib/ionic/js/ionic.bundle.js:16787:11)
    at HTMLDivElement.eventHandler (http://localhost:8101/lib/ionic/js/ionic.bundle.js:16775:9)
    at triggerMouseEvent (http://localhost:8101/lib/ionic/js/ionic.bundle.js:2953:7)

It is possible, discussion and a few related troubles here: http://stackoverflow.com/questions/3254985/back-and-forward-buttons-in-an-iframe — Gjermund Dahl, Jun 16 '16 at 13:09

score 2 · Answer 1 · answered Jun 22 '16 at 18:01

Use the window.history object.

// For the current window
window.history.back();     
window.history.forward();

// For an iframe's window
iframe.contentWindow.history.back(); 
iframe.contentWindow.history.forward();

or

iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1);  // forward

https://developer.mozilla.org/en/dom/window.history

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

For URLs that are not only safe to follow as links, but whose contents are also safe to include in your application. Examples include ng-include, src / ngSrc bindings for tags other than IMG (e.g. IFRAME, OBJECT, etc.)

Note that $sce.RESOURCE_URL makes a stronger statement about the URL than $sce.URL does and therefore contexts requiring values trusted for $sce.RESOURCE_URL can be used anywhere that values trusted for $sce.URL are required.

Doc

app.config(function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain.  Notice the difference between * and **.
    'http://www.baidu.com'
  ]);

  // The blacklist overrides the whitelist so the open redirect here is blocked.
  $sceDelegateProvider.resourceUrlBlacklist([
    'http://myapp.example.com/clickThru**'
  ]);
});

How to manipulate history outside of an iframe

2 Answers2