Dialog with TinyMCE causes error 12003 - ms-word

With the newest update to Word (1611) dialogs with TinyMCE causes error 12003: Invalid URL Syntax.
According to Use the Dialog API the cause is
The dialog box was directed to a URL with the HTTP protocol. HTTPS is required.
Simple example is to put below code in a dialog (oddly enough it works in a panel).
Updated code
<!DOCTYPE html>
<html>
<head>
<title>Office.js with TinyMCE</title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
(function () {
"use strict";
// The initialize function must be run each time a new page is loaded.
Office.initialize = function (reason) {
$(document).ready(function () {
tinymce.init({ selector: 'textarea' });
});
};
})();
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
Edit1: This is only a problem on Windows. On Mac it works fine.
Edit2: The code for opening the dialog
var url = 'https://' + location.host + '/dialog.html';
console.log('url: ' + url); // url: https://localhost:44341/dialog.html
Office.context.ui.displayDialogAsync(url, { height: 30, width: 20 });

12003 usually indicates you don't have https on your dialog url. This issue is more likely raised when displayDialogAsync is called, you are passing a HTTP url in the first argument.
For your html page with TinyMCE, I am able to copy-paste the entire html and open it in Office dialog. Therefore it is unlikely related to the tinyMCE.
(It will be much helpful you could share your code opening up the dialog.)
Best Regards

We've identified the issue. Turns out we are blocking the javascript: URL protocol which seems to be invoked when using TinyMCE. We are working on a fix.

Related

CSP error when using Facebook Checkbox plugin as an iframe widget

I am trying to build a widget that other websites can include via an iframe. The plugin contains the Facebook Checkbox Plugin.
Consider the following code for the iframe:
<!DOCTYPE html>
<html>
<head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3297885870227646',
autoLogAppEvents : true,
xfbml : true,
version : 'v4.0'
});
};
</script>
<script async crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<body>
<div class="fb-messenger-checkbox"
origin="https://fb-marketing-widget.herokuapp.com/widget-iframe"
page_id="110054573751247"
messenger_app_id="3297885870227646"
user_ref="<%= userRef %>"
allow_login="true"
size="standard"
skin="light"
center_align="true">
</div>
</body>
</html>
The above code works when opening the iframe URL directly in the browser. However, when I include the same iframe in another website with a different domain, I'm getting Refused to display 'https://www.facebook.com/v4.0/plugins/messenger_checkbox.php?... in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://my-iframe-domain.com".
Please note that the iframe works when being opened directly, so this is clearly not a problem with whitelisting the domain, having the wrong app id etc.
Any input on how I can the above code as an iframe to be included in other websites would be greatly appreciated!
Facebook restricts which sites are able to frame their content, the error you see comes from your site not being allowed to frame the content from Facebook. Implementation step 1 (https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin/) for Facebook Checkbox plugin is to whitelist your domain(s): https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting. This is not something you can change on your page.

Wicket with Javascript application(GWT made by LibGDX)

I can read english to some degree but I'm not good at writing.
Then I appologize for any rudeness.
I don't know well about wicket but I think it very good.
I want to deploy on wicket Javascript application made by LibGDX ,but on wicket's HTML file it does not work.
LibGDX logo was shown but next is not.(Maybe it seems to be not found next file (xxxx.cache.html) ??)
Please Tell me how to work Javascript(GWT) application on wicket.
Chrome shows this error.
Uncaught ED5709743BB488EF40123B0ADA51D171.cache.html:84393
com.badlogic.gdx.utils.GdxRuntimeException: Invalid assets description file.
My Javascript application is made by GWT which is client only created by LibGDX.
(LibGDX is multi platform game framework.
It can create WebGL application from java by GWT compiled.)
I think it can work in wicket because this GWT application is client only.
Javascript application is
assets
|...(many files used in game)
|-com
|-badlogic
|-gdx
|-...(some directory)
html
|html.nocache.js
|A0B51A68A37B38F9FF8A8855EDF848C7.cache.html
|Bxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|ED5709743BB488EF40123B0ADA51D171.cache.html
|Exxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|hosted.html
|soundmanager2.swf
|logo.png
|....(many files)
|-gwt
|-chrome
|chrome_rtl.css
|chrome.css
|-images
|-...(some directory)
|...(some files)
soundmanager2-jsmin.js
soundmanager2-setup.js
styles.css
My Javascript application can work in Struts JSP(deployment under webapp).
I wrote at wicket in this way :
src/main/java/.../testwicket/page/xxx.html
<!doctype html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<title>wicket + gwt(client only) test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="soundmanager2-setup.js"></script>
<script src="soundmanager2-jsmin.js"></script>
</head>
<body>
<a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">SuperDev Refresh</a>
<div align="center" id="embed-html"></div>
<script type="text/javascript" src="html/html.nocache.js"></script>
</body>
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'default';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
</script>
</html>
Javascript application is in
src/main/webapp/
|-assets
|-html
soundmanager2-jsmin.js
soundmanager2-setup.js
style.css
Even if this code is added in GWT, it do not work(I don't call this code from java...Should I call it?).
public static native void setWindowHref(String url)/*-{
$wnd.location.href = url;
}-*/;

GWT inject jQuery script after page load

I have html page with script file custom.js that is bootstrap for GWT
<!DOCTYPE html>
<html>
<head>
<!-- -->
<script type="text/javascript" src="login/login.nocache.js"></script>
<script type="text/javascript" src="common/js/custom.js"></script>
</head>
<div id="gwt-inject-place"/>
</html>
And that is ok, all works fine.
But in custom.js there is function that I need to fire after login/login.nocache.js inject some html in <div id="gwt-inject-place"/>. Normally custom.js is somehow run before injection take place.
So what should I do to inject JavaScript jquery file?
alert('global');
jQuery(document).ready(function ()
{
alert('inner');
}
This inject custom.js but only global alert shows.
public void onModuleLoad(){
RootPanel.get("gwt-inject-place").add(view);
ScriptInjector.fromUrl("../common/js/custom.js").inject();
}
From Google Docs :
<script src="js-url"/>
Automatically injects the external JavaScript file located at the location specified by src. See automatic resource inclusion for details.
So, You have to place the injection on module.gwt.xml
further Info: Link

XD Proxy Facebook

I am using the facebook connect to login into my website.
In my html page i writen the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test JOpenID </title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'180065668680582',
cookie:true,
status: true,
xfbml:true
});
</script>
<fb:login-button perms="email,user_checkins">
Login with Facebook
</fb:login-button>
</body>
</html>
So when i click on Login with Facebook button a window pop up and ask to fill the username and password. Till this time everything works properly. Problem persist when i click allow button to enter into the destination web-site. A pop up window appear and disappear also. The till of the window was XD proxy and at the url it is ::
http://static.ak.fbcdn.net/connect/xd_proxy.php#cb=f183a80ac008141&origin=http%3A%2F%2F174.129.214.219%2Fff715e2f856e19&relation=opener&transport=flash&frame=f1d4f8afdf94ebe&result=%7B%22perms%22%3A%22email%2Cuser_checkins%22%2C%22selected_profiles%22%3A100001492618815%2C%22session%22%3A%22%7B%5C%22session_key%5C%22%3A%5C%222.pRXlnxq8Ig6QwZyJsG732w__.3600.1294326000-100001492618815%5C%22%2C%5C%22uid%5C%22%3A%5C%22100001492618815%5C%22%2C%5C%22expires%5C%22%3A1294326000%2C%5C%22secret%5C%22%3A%5C%225pe7qxMU_7DitJucmcyftA__%5C%22%2C%5C%22access_token%5C%22%3A%5C%22180065668680582%7C2.pRXlnxq8Ig6QwZyJsG732w__.3600.1294326000-100001492618815%7C_QjDI7eTUD32QVvapbsqxn-r4DE%5C%22%2C%5C%22sig%5C%22%3A%5C%22aa66a1d8b234ebe863e386bb8a6520e7%5C%22%7D%22%7D
As per my requirement is concerned i need after allow the facebook is should allow me to enter to the destination site which i already registered. But it only onen a window and disappear in a second.
What is the issue and how to solve tell me in details...
Thanks
don't use
FB.init({ apiKey: 'API_KEY' });
and use
FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true });
To fix it in Opera, just att the following after FB.init():
if($.browser.opera ) // it uses jQuery library here!
{
FB.XD._transport="postmessage";
FB.XD.PostMessage.init();
}
I've been experiencing the same issue in IE9, and it seemed to stem from upgrading to Flash Player 10. I'd lost hope in trying to fix it since finding an open bug at Facebook covering it. But Henson has posted an answer that fixed it for me. In the JavaScript in my site master I removed the lines
FB.UIServer.setLoadedNode = function (a, b) {
//HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
FB.UIServer._loadedNodes[a.id] = b;
};
and now it works. (N.B. I have not checked to see if the IE8 issue those lines were intended to overcome returns.)

Facebook-IFrame

I am developing a facebook application using IFrame. how to add share option in my application.
You need to use XFBML in an Iframe application.
This should work. Put your Facebook application's API Key in and reference your cross-domain receiver file (xd_receiver)
<fb:share-button href="http://apps.facebook.com/your_app" type="box_count"></fb:share-button>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function() {
FB.init("api key goes here", "path to your xd_receiver file goes here");
});
</script>