Launching MIT App Inventor in iFrame, Cross Origin Error

Open Source Development Extension Development
1

I am trying to integrate MIT App Inventor in iFrame with and Educational product. I am facing the issue of blocked cross-origin frame.

com.google.gwt.core.client.JavaScriptException: (SecurityError) : Blocked a frame with origin "http://127.0.0.1:8888" from accessing a cross-origin frame.

App where I want to integrate within iframe's URL : 127.0.0.1:8000

MIT App Inventor URL: 127.0.0.1:8888

If anybody can help me how to allow cross origin request in GWT framework for MIT App Inventor.

I've tried creating the filter and add some header for allowing the cross origin request as mentioned here : https://code.google.com/archive/p/gwtquery/wikis/Ajax.wiki

private static final String ALLOWED_DOMAINS_REGEXP = ". ";

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

HttpServletRequest req = (HttpServletRequest) servletRequest;
HttpServletResponse resp = (HttpServletResponse) servletResponse;

String origin = req.getHeader("Origin");
if (origin != null && origin.matches(ALLOWED_DOMAINS_REGEXP)) {
  resp.addHeader("Access-Control-Allow-Origin", origin);
  if ("options".equalsIgnoreCase(req.getMethod())) {
    resp.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS");
    if (origin != null) {
      String headers = req.getHeader("Access-Control-Request-Headers");
      String method = req.getHeader("Access-Control-Request-Method");
      resp.addHeader("Access-Control-Allow-Methods", method);
      resp.addHeader("Access-Control-Allow-Headers", headers);
      // optional, only needed if you want to allow cookies.
      resp.addHeader("Access-Control-Allow-Credentials", "true");
      resp.setContentType("text/plain");
    }
    resp.getWriter().flush();
    return;
  }
}

// Fix ios6 caching post requests
if ("post".equalsIgnoreCase(req.getMethod())) {
  resp.addHeader("Cache-Control", "no-cache");
}

if (filterChain != null) {
  filterChain.doFilter(req, resp);
}

}

1 Like
2

faultData = com.google.gwt.core.client.JavaScriptException: (SecurityError) : Blocked a frame with origin "http://127.0.0.1:8888" from accessing a cross-origin frame.

image
image1599×508 37.9 KB

How to fix this issue? I've added some header to resolve this problem but not working...

image
image1148×421 66.6 KB

1 Like
3
4

Same-Origin Policy (SOP) restricts how a document or script loaded from one origin can interact with a resource from another origin. For example, when Site X tries to fetch content from Site Y in a frame, by default, Site Y's pages are not accessible due to security reasons, it would be a huge security flaw if you could do it.

How to solve?

The window.postMessage() method provides a controlled mechanism to securely circumvent this restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

The window.postMessage is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the source property of the dispatched event is always null as a security restriction. (The other properties have their expected values.)

1 Like