Skip to main content
grefel
Community Expert
grefelCommunity Expert
Community Expert
September 1, 2015
Answered

CEP Concept: Access CEP JavaScript Engine from external Website/ Cross Origin

  • September 1, 2015
  • 2 replies
  • 3449 views

I'm experimenting with a CEP 6 Extension and stumbled about a general Design question which I would like to discuss here:

## Setup

My basic idea is to provide the Frontend of the Extension from a CMS-System which is already in place and would only need to add a few buttons to work together with the future InDesign CEP Extension. In this frontend the user can pick items with a given ID, this ID is sent to CEP JavaScript Controller which handles JSX in InDesign and can talk to a REST-APi to get additional content.

## Idea/Concept

For the panel I load an index.html with the controller JS Code, the Frontend is loaded via <object>. 

<!doctype html>


<html lang="en">




<head>


  <script src="js/main.js"></script>


</head>




<body>


  <div>


    <object type="text/html" data="http://external.link.com">


    </object>


  </div>


</body>




</html>

In the main.js there is a test() Function. The external site can call this function via <button onclick="parent.test();">test</button>


This works. And I could start now...

## Questions

  1. Is this the way to go to communicate via external Websites/Frontends and the CEP JS Engine? Are there alternatives to this approach?
  2. In my opinion this is a cross-origin frame and JS-Code should be disabled. Is it enabled on purpose?

Any idea, hint and help is greatly appreciated.

    This topic has been closed for replies.
    Correct answer Anselm Hannemann

    Hi grefel,

    first I have to say I have no experience with the CEP itself so I can’t help much about this particularly. However, as you asked for best practices, I’ll try to give you some information on your question.

      Is this the way to go to communicate via external Websites/Frontends and the CEP JS Engine? Are there alternatives to this approach?

    Usually, when doing such things there are two ways to do this. One is to use an iframe (not sure about advantages of object over iframe) to embed a page from the original. This is fine but it is not very safe regarding security and also doesn’t allow to interact with the iframe content (for security reasons).

    That means you should create an API on your backend. The API should be CORS enabled and if the app that integrates/calls the API supports CSP (I hope so) you should limit access via the CSP.‌‌‌ Then you can request the data from the API using a local HTML/JS and AJAX to exchange data with the API. This is usually the best idea for the intended approach.

    That said, parent.test() is far from ideal as it would execute a test function whereever it finds one in a parent without verification. It also is not possible when CORS is needed and you should replace it with a proper event listener/handler in your javascript on the external site (in that case you could set the CSP to no inline script which makes it more bullet proof as well).

    In my opinion this is a cross-origin frame and JS-Code should be disabled. Is it enabled on purpose?

    Well, it should not work IMO but I have no clue what rendering engine and settings the tool uses. As mentioned before, ideally you need to set up a proper CORS and CSP.

    2 replies

    S
    SlowMotion-RQfUB8
    Inspiring
    September 18, 2015

    Given that extensions support node.js, you could set up a node server inside your extension that acts as a proxy to the external site.

    Anselm Hannemann
    Community Expert
    Anselm HannemannCommunity ExpertCorrect answer
    Community Expert
    September 2, 2015

    Hi grefel,

    first I have to say I have no experience with the CEP itself so I can’t help much about this particularly. However, as you asked for best practices, I’ll try to give you some information on your question.

      Is this the way to go to communicate via external Websites/Frontends and the CEP JS Engine? Are there alternatives to this approach?

    Usually, when doing such things there are two ways to do this. One is to use an iframe (not sure about advantages of object over iframe) to embed a page from the original. This is fine but it is not very safe regarding security and also doesn’t allow to interact with the iframe content (for security reasons).

    That means you should create an API on your backend. The API should be CORS enabled and if the app that integrates/calls the API supports CSP (I hope so) you should limit access via the CSP.‌‌‌ Then you can request the data from the API using a local HTML/JS and AJAX to exchange data with the API. This is usually the best idea for the intended approach.

    That said, parent.test() is far from ideal as it would execute a test function whereever it finds one in a parent without verification. It also is not possible when CORS is needed and you should replace it with a proper event listener/handler in your javascript on the external site (in that case you could set the CSP to no inline script which makes it more bullet proof as well).

    In my opinion this is a cross-origin frame and JS-Code should be disabled. Is it enabled on purpose?

    Well, it should not work IMO but I have no clue what rendering engine and settings the tool uses. As mentioned before, ideally you need to set up a proper CORS and CSP.

    grefel
    Community Expert
    grefelCommunity ExpertAuthor
    Community Expert
    September 2, 2015

    Hey Anselm,

    thanks for your answer. I've upgraded my stuff to eventListeners and dropped the inline-js.

    Regarding cross-origin: Indeed the code does not run in Chrome, I get an security Erorr.

    Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "http://www.publishingx.de".  The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match.

    CEP6 is working with Chromium Embedded Framework CEF 3, branch 1453, revision 1339. Im not quite sure, but it looks like CEF has lower security restrictions or Adobe changed the settings.

    It would be quite cool if someone from Adobe could bring some light, if this behavior intentional and if there are any plans for the future?

    I don't see any security problems with an InDesign Extension and external site and the cross origin solution is much less hassel - especially because I do not control the backend.

    grefel
    Community Expert
    grefelCommunity ExpertAuthor
    Community Expert
    September 2, 2015

    Another solution would be using window.postMessage as described here: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy

    To sum up I see 3 options now:

    1. Implementing CORS and CSP
    2. iframe with window.postMessage
    3. direct JavaScript which works only because there is no same origin policy in CEF
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices