[Cross Platform] [question] How to pass custom Chromium options? about desktop HOT 12 CLOSED

What you mean is like this?

• https://www.chromium.org/developers/how-tos/run-chromium-with-flags
• http://peter.sh/experiments/chromium-command-line-switches

from desktop.

Exactly, it's this one:

I also just grep'ed the repository and found this references:

❯  electron-mattermost git:(master) grep -R "BrowserWindow" .
./src/browser/index.jsx:    // So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
./src/main.js:const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
./src/main.js:  mainWindow = new BrowserWindow(window_options);

Apparently you already considered adding (or actually added) the allowDisplayingInsecureContent option, to fix exactly this issue or am I missing something?

from desktop.

allowDisplayingInsecureContent is available only for BrowserWindow. I need it for webview, but there is only disablewebsecurity.

In Electron app, JavaScript is more dangerous than normal web browser because Node.js API is available. It can access to outside of web browser. So I want to add only allowDisplayingInsecureContent. #35

from desktop.

@yuya-oc Thank you. I have some issues setting up electron to consider said flag. Here's what I did:

1. Added the flag in src/browser/index.jsx (https://github.com/frdmn/electron-mattermost/commits/feature/disable-web-security)
2. Rebuilt using gulp build
3. Try out using npm start

Anything I am missing here?

from desktop.

The attribute might be ignored by React.js. In the past, partition was ignored when I had tried to fix another issue. Please inspect DOM with DevTool.

Now I have some ideas to disable web security, but I don't know whether these have effect.

• Add the attr at componentDidMount().
• Add 'allow-running-insecure-content' in src/main.js by using app.commandLine.appendSwitch().

from desktop.

I tried adding via appendSwitch() but that didn't changed anything. Here's my change commits:

https://github.com/frdmn/electron-mattermost/compare/master...136af9eaf5364028811236bce8c49634a5e7b79c

Also I am not sure what you mean exactly with Add the attr at componentDidMount()? Didn't I already tried that when I added them in the <webview> element which is inside the componentDidMount() function?

Thank you!

from desktop.

What I meant is, try webview.setAttribute('disablewebsecurity', 'on')('on' may be incorrect. Sorry, I'm not good at front-end js.) inside the componentDidMount().

React.js doesn't think about webview tag. So non-regular attributes may not be handled correctly when rendering elements. But componentDidMount() is called after first rendering, so we can use normal DOM-element functions inside it.

from desktop.

Thanks for the Input, Yuya, but I can't get it working even with the help of #atom-shell from Freenode:

[13:59:14] <frdmn> hello!
[13:59:42] <frdmn> I have an issue with a electron application, and try to implement a Chromium flag there (disablewebsecurity)
[13:59:55] <frdmn> However, I am a total newbie and have no clue why it is ignored
[14:00:30] <frdmn> the developer of the application replied with "The attribute might be ignored by React.js. In the past, "partition" was ignored when I had tried to fix another issue."
[14:00:53] <frdmn> here's the adjustement/try that I made: https://github.com/frdmn/electron-mattermost/commits/feature/disable-web-security
[15:30:13] <enlight> frdmn: You can try setting it like this: return <webview ref={node => node && node.setAttribute('disablewebsecurity', true)} />
[15:30:37] <frdmn> enlight: thanks for the reply, let me quickly try that
[15:31:20] <frdmn> enlight: hmm, my ref is already set: ref="webview"
[15:32:04] <frdmn> here's the relevant line https://github.com/frdmn/electron-mattermost/blob/3bf28960a4c2ed1f38567823438306d7a5ecb3ba/src/browser/index.jsx#L296
[15:35:00] <enlight> frdmn: Yeah you create a ref called webview, but the point of my snippet was that you need to set the attribute imperatively in order to prevent React from throwing away attributes it doesn't know about.
[15:36:20] <frdmn> enlight: so I replace my existing ref just with yours?
[15:36:32] <frdmn> sorry for the stupid questions, the whole reactive DOM stuff is really new to me
[15:36:45] <frdmn> I dont really know what I am doing, I just try to fix a annoying bug regarding HTTPS embedding :D
[15:43:37] <frdmn> enlight: hmm, I just replaced it, rebuild using gulp, but nothing changed at all... The application still works like intended and the bug is still persistent (Mixed Content warning)
[15:44:35] <enlight> frdmn: If you look at the webview node in DevTools is the disablewebsecurity attribute set?
[16:01:08] <frdmn> enlight: doesn't look like it: http://up.frd.mn/F52j6OVmub.png
[16:01:40] <frdmn> this is what i've tried: http://paste.frd.mn/axise
[16:10:32] <enlight> frdmn: That's strange, I just tried setting that attribute and I can see it was set if I look in DevTools.
[16:11:13] <frdmn> Hmm, perhaps I am setting it at the wrong place

from desktop.

(On a side note, I would prefer if Mattermost would handle "non-secure" requests when SSL is enabled so they just proxy them somehow like Slack does (`https://slack-imgs.com/?url=http://i.imgur.com/9AW5ox7.gif) so you don't even need to worry about this issue.

Because right now, even when you use Mattermost in browser, whenever someone pastes a non-HTTPS image, the SSL seal in the browser will "break" and show not a full/complete secure connection symbol.)

from desktop.

I see. Thank you for your detailed info.

Right, I think browsers breaks the security to show insecure contents because it's for an image file. As your result, it might be hard to allow only insecure content.

return <webview ref={node => node && node.setAttribute('disablewebsecurity', true)} />

I don't know whether this works correctly. I think elements are not added to browser's actual DOM tree at render function so the attribute will not set. As enlight said, we have to inspect rendered actual DOM.

btw, the main issue is also raised at #35. May I close this issue?

from desktop.

Just for note: facebook/react#2108

from desktop.

fcbfae6 is an example for this.

from desktop.