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%;
  }
}

@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! :)