OS.js x-frame-bypass iframe example

index.js

/*
This is just a demonstration of how this browser hack could be used
to make a "browser".

NOTE: This just bypasses *some* of the ways a browser allows loading
content within an iframe. Most google services etc does not work as
expected, and might just crash or not load.
*/

import './index.scss';
import osjs from 'osjs';
import {h, app} from 'hyperapp';
import {Box, BoxStyled, TextField, Toolbar, Button} from '@osjs/gui';
import {name as applicationName} from './metadata.json';
import 'x-frame-bypass';

const homepage = 'https://www.bing.com';

const render = ($content, win) => {
  const view = (state, actions) => h(Box, {}, [
    h(Toolbar, {
    }, [
      h(TextField, {
        oninput: ev => actions.setTempUrl(ev.target.value),
        onkeypress: ev => {
          if (ev.keyCode === 13) {
            actions.go();
          }
        },
        value: state.temp,
        box: {grow: 1}
      }),
      h(Button, {
        onclick: () => actions.go()
      }, 'Go')
    ]),
    h(BoxStyled, {
      grow: 1,
      shrink: 1,
    }, [
      h('div', {
        key: state.key,
        className: 'Window_WebBrowserWindow Window_WebBrowserWindow__inner',
        oncreate: el => {
          el.innerHTML = `<iframe src="${state.url}" is="x-frame-bypass"></iframe>`;
        }
      })
    ])
  ]);


  return app({
    key: 0,
    temp: homepage,
    url: homepage,
  }, {
    setTempUrl: temp => ({temp}),
    go: () => ({temp, key}) => {
      win.emit('browser:go', temp);
      return ({url: temp, key: key + 1});
    }
  }, view, $content);
};

const init = (proc) => {
  const title = proc.metadata.title.en_EN;
  const win = proc.createWindow({
    id: 'WebBrowserWindow',
    title,
    dimension: {width: 400, height: 400}
  })
    .on('destroy', () => proc.destroy())
    .render(render);

  win.on('browser:go', url => win.setTitle(`${title} - ${url}`))
  win.emit('browser:go', homepage);
};

const register = (core, args, options, metadata) => {
  const proc = core.make('osjs/application', {args, options, metadata});
  init(proc);
  return proc;
};

osjs.register(applicationName, register);

index.scss

.Window_WebBrowserWindow {
  &__inner {
    width: 100%;
    height: 100%;
  }

  iframe {
    border: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
}

This example should be run in a blank application using "npm make:application" or "npm make:iframe-application" or not important?

@msjavan Doesn't matter how you set up the application. This is the full source (excluding the webpack config and metadata file).

I got this error:

@msjavan What was the build output of the app ?

It was successfully built

I assume you added x-frame-bypass package ? If so, I just have to make a guess that hyperapp v2 -- while this app requires 1.2.10.

package.json:
{
"name": "Neo4j2",
"scripts": {
"test": "npm run eslint && npm run stylelint",
"build": "webpack",
"watch": "webpack --watch",
"eslint": "eslint index.js server.js",
"stylelint": "stylelint index.scss",
"prepublishOnly": "npm run test && rm ./dist/* && npm run build"
},
"dependencies": {
"x-frame-bypass": "^1.0.2"
},
"devDependencies": {
"@osjs/dev-meta": "^1.0.2"
},
"eslintConfig": {
"env": {
"browser": true,
"node": true
},
"parserOptions": {
"sourceType": "module"
},
"extends": "@osjs/eslint-config"
},
"stylelint": {
"extends": "@osjs/stylelint-config"
},
"babel": {
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
},
"osjs": {
"type": "package"
}
}

@msjavan

Doesn't seem like you have hyperapp installed in the package, but if should take the installed one from your distro 🤔 I'd try installing hyperapp v1 in the package directory and re-build.

I added it manually as follow:

"dependencies": {
"x-frame-bypass": "^1.0.2",
"hyperapp": "^1.2.10"
},

then rebuild the package but got same exception in the client side.

@msjavan

Added it manually ? As in not used npm install ?

1- added manually
2- npm install
3- npm run build

And the contents of your index.js matches what is above ?

OMG !!!!

I see letter "k" in the first line :-P my mistake when paste the code:

Its working. thanks for your time ❤️

Aha. Great! :)