Telegram Client NextCloud / Content Security Policies Problem

💻 Development app dev
1

Hey Nextcloud Community,
I am trying to create an telegram app based on this code. I downloaded the skeleton app, removed the navigation and settings things and replaced the index in the content folder with my modified index from webogram. Then I moved the css/js/vendor files to the css/js/vendor folder from the app. My problem is now that the CSP don’t let some JavaScript files to be loaded by other ones. One way would be that I load all files with the script() function, but that wouldn’t be very good for the performance because that are more then 800 files. My question is how I can allow that files to interact with each other with the CSP or something like that. I already tried the possibilitys that are in this thread but they didn’t work or I did something wrong.

I hope that someone knows what I must do to get that working.
Best regards c:

2

You can tweak CSP just fine like this: https://github.com/nextcloud/news/blob/master/lib/Controller/PageController.php#L79

However why not simply create a bundle of all the 800 files with webpack?

3

Thanks for your answer

I tried this
$csp = new ContentSecurityPolicy(); $csp->addAllowedScriptDomain('\'self\''); $response->setContentSecurityPolicy($csp);
and
$csp = new ContentSecurityPolicy(); $csp->addAllowedScriptDomain('*'); $response->setContentSecurityPolicy($csp);

but the page then didn’t load anymore.

I’ll try webpack tomorrow

4

I can’t get webpack working on my Ubuntu subsystem of windows. Even a friend who was on linux didn’t get it.
Is there any working tutorial for webpack or an other option?

5

No offense: why dont you google webpack tutorial?

6

I did, but the tutorials didn’t work :c

7

Do you need a virtual machine somewhere?

8

I tried it now with a virtual machine on Ubuntu but I got this error:

image_2017-05-03_12-46-04.png1367×23 26.5 KB

9

Hi @Abfelbaum!

Perhaps you should post more details of your current test environment:

  • OS
  • Used plugins
  • What exactly you want to achive
  • What exactly does not work

Good luck! :+1:

10

Linux raspberrypi 4.4.50-v7+ #970 SMP Mon Feb 20 19:18:29 GMT 2017 armv7l[quote=“hustenfrei, post:9, topic:12026”]
Used plugins
[/quote]
activated:

  • activity: 2.4.1
  • activitylog: 0.0.1
  • admin_audit: 1.1.0
  • admin_notifications: 1.0.0
  • apporder: 0.3.3
  • audioplayer: 1.5.1
  • bookmarks: 0.9.1
  • calendar: 1.5.2
  • checksum: 0.3.4
  • comments: 1.1.0
  • contacts: 1.5.3
  • dav: 1.1.1
  • direct_menu: 0.10.1
  • drawio: 0.8.6
  • encryption: 1.4.1
  • external: 1
  • federatedfilesharing: 1.1.1
  • federation: 1.1.1
  • files: 1.6.1
  • files_accesscontrol: 1.1.2
  • files_automatedtagging: 1.1.1
  • files_downloadactivity: 1.0.1
  • files_external: 1.1.2
  • files_markdown: 1.0.1
  • files_pdfviewer: 1.0.1
  • files_sharing: 1.1.1
  • files_texteditor: 2.2
  • files_trashbin: 1.1.0
  • files_videoplayer: 1.0.0
  • firstrunwizard: 2.0
  • gallery: 16.0.0
  • issuetemplate: 0.2.1
  • logreader: 2.0.0
  • lookup_server_connector: 1.0.0
  • mail: 0.6.4
  • nextcloud_announcements: 1.0
  • notes: 2.2.0
  • notifications: 1.0.1
  • password_policy: 1.1.0
  • provisioning_api: 1.1.0
  • serverinfo: 1.1.1
  • sharebymail: 1.0.1
  • systemtags: 1.1.3
  • tasks: 0.9.5
  • telegramfornextcloud: 0.0.1
  • templateeditor: 0.2
  • theming: 1.1.1
  • twofactor_backupcodes: 1.0.0
  • twofactor_totp: 1.1.0
  • twofactor_u2f: 1.3.0
  • updatenotification: 1.1.1
  • user_external: 0.4
  • workflowengine: 1.1.1

deactivated:

  • files_retention
  • files_versions
  • onlyoffice
  • survey_client
  • user_ldap
  • user_saml[quote=“hustenfrei, post:9, topic:12026”]
    What exactly you want to achive
    [/quote]

I want to develop an Telegram Web app for Nextcloud based on Webogram.

The JavaScript files can’t access each other. I think that it is because of the Content Security Policies. I tried to change them with
$csp = new ContentSecurityPolicy();
$csp->addAllowedScriptDomain(‘'self'’);
$response->setContentSecurityPolicy($csp);
and
$csp = new ContentSecurityPolicy();
$csp->addAllowedScriptDomain(‘*’);
$response->setContentSecurityPolicy($csp);
but that didn’t work too.

11

that’s not an error but a warning. Ignore it :wink:

12

Hey,
I tried it now for a few days but i stuck at this error:

grafik.png1497×511 77.7 KB

My webpack.config.js can you find here. I think that I made something wrong there because it doesn’t work in a virtual machine too.

13

Looking at your config shouldn’t it be

entry: {

instead of

entry: [

?
And you should use , (commas) at the end of lines.
Source

14

After these changes I get a new error message:

Error message

jojo@jojo:/mnt/c/Users/j/Desktop/tg/test$ ./node_modules/.bin/webpack /mnt/c/Users/j/Desktop/tg/test/webpack.config.js:11 path.resolve(__dirname, 'app/js/lib/polyfill.js'), ^ SyntaxError: Unexpected token . at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:374:25) at Object.Module._extensions..js (module.js:417:10) at Module.load (module.js:344:32) at Function.Module._load (module.js:301:12) at Module.require (module.js:354:17) at require (internal/module.js:12:17) at requireConfig (/mnt/c/Users/j/Desktop/tg/test/node_modules/webpack/bin/convert-argv.js:96:18) at /mnt/c/Users/j/Desktop/tg/test/node_modules/webpack/bin/convert-argv.js:109:17 at Array.forEach (native)

[details=Config file]// webpack.config.js: var path = require('/mnt/c/Users/j/Desktop/tg/test/'); //var webpack = require('webpack'); module.exports = { resolve: { extensions: ['.js', '.jsx'] }, entry: { path.resolve(__dirname, 'app/js/lib/polyfill.js'), path.resolve(__dirname, 'app/vendor/jquery/jquery.min.js'), path.resolve(__dirname, 'app/js/lib/config.js'), path.resolve(__dirname, 'app/js/init.js'), path.resolve(__dirname, 'app/js/offline_manager.js'), path.resolve(__dirname, 'app/vendor/jquery.nanoscroller/nanoscroller.js'), path.resolve(__dirname, 'app/vendor/angular/angular.js'), path.resolve(__dirname, 'app/vendor/angular/angular-route.js'), path.resolve(__dirname, 'app/vendor/angular/angular-animate.js'), path.resolve(__dirname, 'app/vendor/angular/angular-sanitize.js'), path.resolve(__dirname, 'app/vendor/angular/angular-touch.js'), path.resolve(__dirname, 'app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js'), path.resolve(__dirname, 'app/vendor/angular-media-player/angular-media-player.js'), path.resolve(__dirname, 'app/vendor/jsbn/jsbn_combined.js'), path.resolve(__dirname, 'app/vendor/cryptoJS/crypto.js'), path.resolve(__dirname, 'app/vendor/rusha/rusha.js'), path.resolve(__dirname, 'app/vendor/zlib/gunzip.min.js'), path.resolve(__dirname, 'app/vendor/closure/long.js'), path.resolve(__dirname, 'app/vendor/leemon_bigint/bigint.js'), path.resolve(__dirname, 'app/vendor/libwebpjs/libwebp-0.2.0.js'), path.resolve(__dirname, 'app/vendor/angularjs-toaster/toaster.js'), path.resolve(__dirname, 'app/vendor/clipboard/clipboard.js'), path.resolve(__dirname, 'app/js/lib/utils.js'), path.resolve(__dirname, 'app/js/lib/bin_utils.js'), path.resolve(__dirname, 'app/js/lib/tl_utils.js'), path.resolve(__dirname, 'app/js/lib/ng_utils.js'), path.resolve(__dirname, 'app/js/lib/i18n.js'), path.resolve(__dirname, 'app/js/lib/mtproto.js'), path.resolve(__dirname, 'app/js/lib/mtproto_wrapper.js'), path.resolve(__dirname, 'app/js/app.js'), path.resolve(__dirname, 'app/js/services.js'), path.resolve(__dirname, 'app/js/controllers.js'), path.resolve(__dirname, 'app/js/filters.js'), path.resolve(__dirname, 'app/js/messages_manager.js'), path.resolve(__dirname, 'app/js/message_composer.js'), path.resolve(__dirname, 'app/js/directives.js'), path.resolve(__dirname, 'app/js/directives_mobile.js'), }, output: { path: path.resolve(__dirname, 'app/dist'), filename: 'main.js', publicPath: 'app/dist/' }, devtool: 'source-map' }[/details]

I also tried to let it look like this (./app/bla.js) but then I get this error:

Error message

jojo@jojo:/mnt/c/Users/j/Desktop/tg/test$ ./node_modules/.bin/webpack module.js:328 throw err; ^ Error: Cannot find module '/mnt/c/Users/j/Desktop/tg/test/' at Function.Module._resolveFilename (module.js:326:15) at Function.Module._load (module.js:277:25) at Module.require (module.js:354:17) at require (internal/module.js:12:17) at Object.<anonymous> (/mnt/c/Users/j/Desktop/tg/test/webpack.config.js:3:12) at Module._compile (module.js:410:26) at Object.Module._extensions..js (module.js:417:10) at Module.load (module.js:344:32) at Function.Module._load (module.js:301:12) at Module.require (module.js:354:17)

[details=Config file]
// webpack.config.js: var path = require('/mnt/c/Users/j/Desktop/tg/test/'); //var webpack = require('webpack'); module.exports = { resolve: { extensions: ['.js', '.jsx'] }, entry: { app: ['./app/js/lib/polyfill.js', './app/js/lib/config.js', './app/js/init.js', './app/js/offline_manager.js', './app/js/lib/utils.js', './app/js/lib/bin_utils.js', './app/js/lib/tl_utils.js', './app/js/lib/ng_utils.js', './app/js/lib/i18n.js', './app/js/lib/mtproto.js', './app/js/lib/mtproto_wrapper.js', './app/js/app.js', './app/js/services.js', './app/js/controllers.js', './app/js/filters.js', './app/js/messages_manager.js', './app/js/message_composer.js', './app/js/directives.js', './app/js/directives_mobile.js'], vendors:['./app/vendor/jquery/jquery.min.js', './app/vendor/jquery.nanoscroller/nanoscroller.js', './app/vendor/angular/angular.js', './app/vendor/angular/angular-route.js', './app/vendor/angular/angular-animate.js', './app/vendor/angular/angular-sanitize.js', './app/vendor/angular/angular-touch.js', './app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js', './app/vendor/angular-media-player/angular-media-player.js', './app/vendor/jsbn/jsbn_combined.js', './app/vendor/cryptoJS/crypto.js', './app/vendor/rusha/rusha.js', './app/vendor/zlib/gunzip.min.js', './app/vendor/closure/long.js', './app/vendor/leemon_bigint/bigint.js', './app/vendor/libwebpjs/libwebp-0.2.0.js', './app/vendor/angularjs-toaster/toaster.js', './app/vendor/clipboard/clipboard.js'] }, output: { path: './app/dist', filename: 'main.js', publicPath: 'app/dist/' }, devtool: 'source-map' }[/details]

15

I had the last week not much time but I got Webpack running. The problem now is that the files that Webpack creates look like this:

[details=File]/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // identity function for calling harmony imports with the correct context /******/ __webpack_require__.i = function(value) { return value; }; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "app/"; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; importScripts(['js/lib/polyfill.js', 'js/lib/config.js', 'js/init.js', 'js/offline_manager.js', 'js/lib/utils.js', 'js/lib/bin_utils.js', 'js/lib/tl_utils.js', 'js/lib/ng_utils.js', 'js/lib/i18n.js', 'js/lib/mtproto.js', 'js/lib/mtproto_wrapper.js', 'js/app.js', 'js/services.js', 'js/controllers.js', 'js/filters.js', 'js/messages_manager.js', 'js/message_composer.js', 'js/directives.js', 'js/directives_mobile.js']); /***/ }) /******/ ]);[/details]

Did I something wrong or is it Webpack? My browser says that importScripts() is not defined.

Because of that error I tried to import the files in a worker by putting the importScripts() function in a seperate file and add this code to the created file: var worker = new Worker('app.js');

When I do that my browser won’t load the jquery files (in vendor/, I created for the vendor/ directory and the js/ direcotry a different entry) because of this error TypeError: e is undefined jquery.min.js:2, but without the config files from Webpack it works perfectly, so I don’t think that the file is broken.

At least I want to ask if there is a way to put all contents of the JavaScript files into one file, because with importScripts() the files must access each other and that seems to be not possible in Nextcloud.

EDIT: Does someone know why the content of the Hide Details part is shown directly? In the preview it works fine.