TypeError and Blank Pages #1475

Closed
opened 2026-02-05 01:00:36 +03:00 by OVERLORD · 11 comments
Owner

Originally created by @Coolfeather2 on GitHub (Dec 10, 2019).

OS: Ubuntu 18.04 LTS
Bookstack Version: v0.27.5
MySQL Version: 5.7
PHP Version: 7.2

Apache web
Setup using 18.04 Script


Any books viewed return as a blank page

Searching is also appears for a few secs and then goes blank, similar to #748

Was working 24 hours ago
Restarted System, no Changes


Error from browser console:

TypeError: this.$el.getAttribute is not a function
    at Cn.mounted (VM752 app.js:27)
    at He (VM752 app.js:27)
    at tn (VM752 app.js:27)
    at VM752 app.js:27
    at Cn.$mount (VM752 app.js:27)
    at Cn.$mount (VM752 app.js:27)
    at Cn._init (VM752 app.js:27)
    at new Cn (VM752 app.js:27)
    at X (VM752 app.js:27)
    at Module.<anonymous> (VM752 app.js:27)
Originally created by @Coolfeather2 on GitHub (Dec 10, 2019). **OS:** Ubuntu 18.04 LTS **Bookstack Version:** v0.27.5 **MySQL Version**: 5.7 **PHP Version:** 7.2 Apache web Setup using 18.04 Script --- Any books viewed return as a blank page Searching is also appears for a few secs and then goes blank, similar to #748 Was working 24 hours ago Restarted System, no Changes --- Error from browser console: ``` TypeError: this.$el.getAttribute is not a function at Cn.mounted (VM752 app.js:27) at He (VM752 app.js:27) at tn (VM752 app.js:27) at VM752 app.js:27 at Cn.$mount (VM752 app.js:27) at Cn.$mount (VM752 app.js:27) at Cn._init (VM752 app.js:27) at new Cn (VM752 app.js:27) at X (VM752 app.js:27) at Module.<anonymous> (VM752 app.js:27) ```
Author
Owner

@ssddanbrown commented on GitHub (Dec 12, 2019):

Hi @Coolfeather2,
Sorry to hear you are experiencing issues.

Does this issue appear on the demo site at all?: https://demo.bookstackapp.com/
Does this occur on a fresh book, With not contents?

@ssddanbrown commented on GitHub (Dec 12, 2019): Hi @Coolfeather2, Sorry to hear you are experiencing issues. Does this issue appear on the demo site at all?: https://demo.bookstackapp.com/ Does this occur on a fresh book, With not contents?
Author
Owner

@Coolfeather2 commented on GitHub (Dec 12, 2019):

Issue does not appear on Demo

Issue does occur on a fresh book, with no content

@Coolfeather2 commented on GitHub (Dec 12, 2019): Issue does not appear on Demo Issue does occur on a fresh book, with no content
Author
Owner

@Coolfeather2 commented on GitHub (Dec 13, 2019):

I can view individual sheets, but as soon as I navigate to the book or edit the page, it goes blank

I can provide screenshots if neccessary

@Coolfeather2 commented on GitHub (Dec 13, 2019): I can view individual sheets, but as soon as I navigate to the book or edit the page, it goes blank I can provide screenshots if neccessary
Author
Owner

@ssddanbrown commented on GitHub (Dec 15, 2019):

Very odd,

  • Have you tried viewing in a different browser?
  • Have you got any content in the "Custom HTML Head Content" setting in the settings area?
  • Have you attempted any custom tweaks to your BookStack instance?
@ssddanbrown commented on GitHub (Dec 15, 2019): Very odd, * Have you tried viewing in a different browser? * Have you got any content in the "Custom HTML Head Content" setting in the settings area? * Have you attempted any custom tweaks to your BookStack instance?
Author
Owner

@Coolfeather2 commented on GitHub (Dec 15, 2019):

  • Have you tried viewing in a different browser?
    Currently viewed in Chrome
    Tried:

  • Incognito

  • Firefox

  • Edge - Site is inaccessible as does not support TLS

  • IE - Site is inaccessible as does not support TLS

    Issue is still present and has the 1 second where it works

  • Have you got any content in the "Custom HTML Head Content" setting in the settings area?
    Nothing in Custom HTML Head Content

  • Have you attempted any custom tweaks to your BookStack instance?
    No custom tweaks, but it is running through a nginx proxy -> bluestack apache

@Coolfeather2 commented on GitHub (Dec 15, 2019): - **Have you tried viewing in a different browser?** Currently viewed in Chrome Tried: - [x] Incognito - [x] Firefox - [ ] Edge - Site is inaccessible as does not support TLS - [ ] IE - Site is inaccessible as does not support TLS Issue is still present and has the 1 second where it works - **Have you got any content in the "Custom HTML Head Content" setting in the settings area?** Nothing in Custom HTML Head Content - **Have you attempted any custom tweaks to your BookStack instance?** No custom tweaks, but it is running through a nginx proxy -> bluestack apache
Author
Owner

@Flatlyn commented on GitHub (Dec 23, 2019):

I’m getting this issue too, but on a fresh, first-time install. Every other page works fine, but I can’t create any pages/chapters as click on a book returns a blank page (only the header bar is visible). Console errors are the same as coolfeathers — this.$el.getAttribute is not a function.

No custom header content, or tweaks, literally just installed fresh and this is what’s happening on first visit. It happens on all browsers, but not on the demo site.

Running Ubuntu 18 LTS with PHP 7.2-fpm

@Flatlyn commented on GitHub (Dec 23, 2019): I’m getting this issue too, but on a fresh, first-time install. Every other page works fine, but I can’t create any pages/chapters as click on a book returns a blank page (only the header bar is visible). Console errors are the same as coolfeathers — `this.$el.getAttribute is not a function`. No custom header content, or tweaks, literally just installed fresh and this is what’s happening on first visit. It happens on all browsers, but not on the demo site. Running Ubuntu 18 LTS with PHP 7.2-fpm
Author
Owner

@Coolfeather2 commented on GitHub (Dec 23, 2019):

@ssddanbrown if you would like I can provide the url to my installation for testing via discord

@Coolfeather2 commented on GitHub (Dec 23, 2019): @ssddanbrown if you would like I can provide the url to my installation for testing via discord
Author
Owner

@Flatlyn commented on GitHub (Dec 25, 2019):

@ssddanbrown Did some more digging and there is slightly more information from Firefox (although the issue still occurs there). When loading the site on Firefox, for a brief second the Pages content appears, then flashes away again.

Furthermore, Firefox generates an additional error of Content Security Policy: The page's settings blocked the loading of a resource at eval ("default-src"). 5 app.js:17353:23. That error isn't generated on the demo site either.

@Flatlyn commented on GitHub (Dec 25, 2019): @ssddanbrown Did some more digging and there is slightly more information from Firefox (although the issue still occurs there). When loading the site on Firefox, for a brief second the Pages content appears, then flashes away again. Furthermore, Firefox generates an additional error of `Content Security Policy: The page's settings blocked the loading of a resource at eval ("default-src"). 5 app.js:17353:23`. That error isn't generated on the demo site either.
Author
Owner

@Flatlyn commented on GitHub (Dec 27, 2019):

@ssddanbrown @Coolfeather2 Got this issue solved, at least for me (partially anyway), but possibly for you too Coolfeather since you said you used Nginx as a reverse proxy. The issue was being cause by a line in the Nginx security config regarding the content-security-policy header. I had generated my config from nginxconfig.io and the default header were causing an issue.

This was the generated /etc/nginx/nginxconfig.io/security.io file

# security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# . files
location ~ /\.(?!well-known) {
        deny all;
}

This is included in the server config with include nginxconfig.io/security.io, remove that line and replace with the following security info; the security.conf file itself could also be edited, but I didn't want to do that as I have other sites using that file as well.

The new block simply comments out the content-security-policy header.

# security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
#add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# . files
location ~ /\.(?!well-known) {
        deny all;
}

I'm listed it as a partial fix as the header should ideally be there, and I'm still not sure why the header is causing an issue for BookStack.

@Flatlyn commented on GitHub (Dec 27, 2019): @ssddanbrown @Coolfeather2 Got this issue solved, at least for me (partially anyway), but possibly for you too Coolfeather since you said you used Nginx as a reverse proxy. The issue was being cause by a line in the Nginx security config regarding the content-security-policy header. I had generated my config from nginxconfig.io and the default header were causing an issue. This was the generated /etc/nginx/nginxconfig.io/security.io file ``` # security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-XSS-Protection "1; mode=block" always; add_header X-Content-Type-Options "nosniff" always; add_header Referrer-Policy "no-referrer-when-downgrade" always; add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; # . files location ~ /\.(?!well-known) { deny all; } ``` This is included in the server config with `include nginxconfig.io/security.io`, remove that line and replace with the following security info; the security.conf file itself could also be edited, but I didn't want to do that as I have other sites using that file as well. The new block simply comments out the content-security-policy header. ``` # security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-XSS-Protection "1; mode=block" always; add_header X-Content-Type-Options "nosniff" always; add_header Referrer-Policy "no-referrer-when-downgrade" always; #add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; # . files location ~ /\.(?!well-known) { deny all; } ``` I'm listed it as a partial fix as the header should ideally be there, and I'm still not sure why the header is causing an issue for BookStack.
Author
Owner

@Coolfeather2 commented on GitHub (Dec 27, 2019):

That fixed it for me too,

I copied the nginxconfig.io/security.io into my bookstack server block and dsabled the Content-Security-Policy

I suspect thats the only header causing the issue.

        # security
        #include nginxconfig.io/security.conf;
        # security headers
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "no-referrer-when-downgrade" always;
        #add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
        add_header Strict-Transport-Security "max-age=31536000" always;
@Coolfeather2 commented on GitHub (Dec 27, 2019): That fixed it for me too, I copied the nginxconfig.io/security.io into my bookstack server block and dsabled the `Content-Security-Policy` I suspect thats the only header causing the issue. ``` # security #include nginxconfig.io/security.conf; # security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-XSS-Protection "1; mode=block" always; add_header X-Content-Type-Options "nosniff" always; add_header Referrer-Policy "no-referrer-when-downgrade" always; #add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always; add_header Strict-Transport-Security "max-age=31536000" always; ```
Author
Owner

@ssddanbrown commented on GitHub (Dec 27, 2019):

Cool, Happy to hear you found the issue.

There's likely an eval statement in the output JS that's being blocked by CSP rules. I'm intending to look at including CSP into the platform itself soon, so that strict rules can be enabled by default while keeping in mind support for common edge cases where conflicts could occur; Will likely investigate deeper what CSP can affect and the issues that occur around that time.

@ssddanbrown commented on GitHub (Dec 27, 2019): Cool, Happy to hear you found the issue. There's likely an `eval` statement in the output JS that's being blocked by CSP rules. I'm intending to look at including CSP into the platform itself soon, so that strict rules can be enabled by default while keeping in mind support for common edge cases where conflicts could occur; Will likely investigate deeper what CSP can affect and the issues that occur around that time.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#1475