BulletProof Security Menus CSS and JS Not Displaying Correctly

[AITpro Admin]

UPDATE BPS Pro 14+ and BPS free 3.5+ versions:  The Script|Style Loader Filter (SLF) In BPS Plugin Pages option is now turned On by default.  Previously there was a performance problem caused by turning SLF On, but that issue has been figured out and now SLF increases BPS plugin page performance significantly.

Email Question:

BulletProof Security menus and/or Read Me help buttons are not displaying correctly – blank, white, broken, disappear, etc.  The menus are displaying in the wrong font colors and menus seem to be broken.  Also the Blue Read Me buttons are displaying the help text in the BulletProof Security pages.  It appears that the CSS and JS scripts are being broken by another plugin or theme that i am using on my website.  See images below.

Answer:

Unfortunately, this is a very common problem that we see with plugins and themes.  A lot of Plugins and Themes do not contain their CSS and JS scripts to their own plugin settings pages and will load their plugin css and js scripts everywhere throughout the entire WordPress Admin area instead of only loading in the plugin’s settings pages or themes will load css and js scripts everywhere throughout the entire WordPress Admin area instead of only loading in the Theme’s settings pages and only on the frontend of your website. You should notify the plugin or theme author about this problem with their plugin or theme and have them correct their plugin’s or theme’s coding.  We have a solution to block the offending plugin or theme css and js scripts from loading in BPS plugin pages.

This not only causes problems for other plugins and themes, but the bigger problem is that these scripts do not need to be loading everywhere and every time a script is run on your website it costs something – let’s say you have 10 plugins that are loading their scripts inappropriately throughout the WordPress Admin area and other plugins pages.  This causes an unnecessary performance loss for your website – not only does the effect the backend WordPress Dashboard performance and other plugin’s performance, but this also causes a performance drain/loss for your website overall – your website will run slower in general.

This is the way the BulletProof Security Menus and Blue Read Me help buttons should be displayed / look like.

How to find out which plugin is loading its jQuery and CSS scripts in BPS / BPS Pro plugin pages

Right mouse click anywhere in any BPS or BPS Pro pages and click the View Source menu command or a similar menu command in whichever Browser you are using.  This will show you the source code of the page and you will see the name of the plugin displayed in the source code with a link pointing to that plugin’s js and css scripts.

Example of the BPS javascript link that you should see in the source code code of a BPS plugin page.  If you see other plugin’s javascript links in the source code then this means that this plugin is loading its javascript in BPS / BPS Pro plugin pages which is breaking BPS javascript.

<script type='text/javascript' src='https: //forum.ait-pro.com/wp-content/plugins/bulletproof-security/admin/js/bulletproof-security-admin-4.js?ver=3.5.2'></script>

Post the name of the plugin that is loading its javascript in BPS / BPS Pro pages so that we can create code to block that plugin’s javascript from inappropriately loading in BPS / BPS Pro plugin pages.

Known plugins that are loading their scripts everywhere in the WordPress Dashboard area – all other plugin pages and all WordPress pages

These plugins are pending fixes by the plugin authors to fix their coding mistake of loading their scripts everywhere in the WordPress Dashboard and breaking other plugin’s scripts.  Once the plugin author has fixed his/her coding mistakes then the plugin will be removed from this list.

1. NextScripts: SNAP Pro Upgrade Helper – Version all | By Next Scripts
2. Select NextScripts: Social Networks Auto-Poster – Version 2.7.17 | By Next Scripts
3. All in One Webmaster – Version 8.2.8 | By Crunchify
4. EasyRotator for WordPress – Version 1.0.10 | By DWUser.com
5. Facebook Members – Version 5.0.6 | By Crunchify

[AITpro Admin]

Edited|Updated:  5-22-2015 – outdated/defunction information has been deleted.  Newer much better and efficient code example:  http://forum.ait-pro.com/forums/topic/remove-plugin-scripts-from-loading-in-other-plugin-pages/

[AITpro Admin]

Edited|Updated:  5-22-2015 – outdated/defunction information has been deleted.  Newer much better and efficient code example:  http://forum.ait-pro.com/forums/topic/remove-plugin-scripts-from-loading-in-other-plugin-pages/

[Dan]

After setting up BP Pro I am having issues in the wordpress admin. None of the css and JS (including for bulletproof plugin) are working. In the javascript console I’m getting a bunch of 403 forbidden messages. It seems as if it’s blocking wp-admin from loading needed css/js files from admin plugins. The bulletproof layout is all distorted.

I assume I need to add some custom code in the htaccess file, can someone point me in the right direction?
Cheers,
Dan

[AITpro Admin]

@ Dan – your Topic has been merged into this relevant Topic.

First, do you have BPS Pro 8.2 installed?  If not, please install the latest version of BPS Pro, which is 8.2.  8.2 includes additional code that prevents other plugins from breaking BPS CSS and JS.

The other cause of this issue/problem is that there is a problem with your Plugin Firewall whitelist rules.  ie invalid Plugin Firewall whitelist rules have been added/created in the Plugin Firewall Whitelist text area.

http://forum.ait-pro.com/forums/topic/plugin-firewall-bps-menu-tabs-not-displaying-correctly-visual-format-is-broken-css-format-is-broken/

Go to the Plugin Firewall Whitelist Text area and copy and paste your Plugin Firewall whitelist rules here.

[Dan]

Hey,

I’m new to this plugin and still trying to figure things out, so pardon my ignorance. I do have 8.2 installed. I looked at the whitelist and right now it has: /contact-form-7/includes/js/jquery.form.min.js, /contact-form-7/includes/js/scripts.js as the only entry.

I see there is a scanner but I’m not sure how to use it, when I clicked the scan nothing seemed to happen but that may be because I’m not seeing what I should be seeing.

edit: While I think of it – is there a “Basics for every site” kind of guide to get started. I know every site is different, and every host is different but is there a checklist for general purpose?

Cheers,
Dan

[AITpro Admin]

UPDATE: Do these troubleshooting steps first
——————————–
3. On the Security Modes page, click the Plugin Firewall BulletProof Mode Deactivate button.

Next..

Clear your Browser cache and plugin cache
Click the Save Whitelist Options button.
Activate the Plugin Firewall again.

Refresh your Browser a couple of times.
If the problem happens again, continue reading this forum topic to look at other possible causes and Post a reply in this Forum Topic for assistance.
——————————–

Ok your Plugin Firewall whitelist rules look fine. There is one other thing that will cause this issue/problem. If your Host or a Proxy is blocking your IP address or Hostname/Website name from being able to be retrieved by the Setup Wizard or Plugin Firewall tools then a blank entry will be where your IP address or Hostname should be in the Plugin Firewall .htaccess file.

Do these steps:

Click the Save Whitelist Options button.
Activate the Plugin Firewall again.

If the problem is still occurring then do these steps:

Go to the htaccess File Editor tab page.
Click the Your Current Plugins htaccess File tab.
Scroll down in the file contents until you see this code below and copy and paste it here.

Order Allow,Deny
Allow from env=whitelist
Allow from ait-pro.com
Allow from 173.201.92.1
# BEGIN PUBLIC IP
Allow from xxx.xxx.xxx.xxx
# END PUBLIC IP

If this is the problem I think it is then it is very rare and is Host specific so for most folks this would never be an issue/problem so it is not a general kind of troubleshooting thing.

[Dan]

Hey,

I did the steps above, including the file editor, and my IP is showing there as it should, exactly as you copied it. Unfortunately the issue persists.

I don’t think there’s anything special about my setup, except we are using suPHP, but I’ve never run into any issues before. Other than that it’s a standard setup. I’m also using Cloudflare and Cloudfront, but they’re both integrated with W3 Total cache and I’ve setup an ignore rule for both. I don’t see how it would be connected but wanted to mention it just in case.

Cheers,

Dan

[AITpro Admin]

I need for you to copy and paste the Plugin Firewall .htaccess code so that I can look at it.  If you do not want to expose your website name or Server IP address then replace your hostname with just the first 3 letters of your domain name and I need to see the first octect of your IP address.  What I have seen is that if your Server is misconfigured (specifically the Proxy) or there is a misconfiguration with Cloudflare then I need to see enough of your actual real info to see the problem that is occurring.

Example:

Order Allow,Deny
Allow from env=whitelist
Allow from facxxxxxx.com
Allow from 173.xxx.xxx.xxx
# BEGIN PUBLIC IP
Allow from 10.xxx.xxx.xxx
# END PUBLIC IP

[AITpro Admin]

Make sure that you are NOT allowing Cloudflare to cache your wp-admin area.  There is a setting on the Cloudflare site in your Cloudflare options to prevent Cloudflare from caching your wp-admin area.  You definitely do not want to allow that and ONLY want to cache the frontend of your website for website visitors.  The backend/secure wp-admin area should NOT be cached by Cloudflare for every possible logical reason I can think of and of course things will break in your backend if you allow that.

[Dan]

Do I have to additional plugins manually? Or is there a way for it to scan for the plugins used? Yeah, I have an exception rule for both Cloudfront and Cloudflare for /wp-admin with all apps off.

Order Allow,Deny
Allow from env=whitelist
Allow from finREMOVED
Allow from 162.REMOVED
# BEGIN PUBLIC IP
Allow from 88.REMOVED
# END PUBLIC IP

[AITpro Admin]

The Setup Wizard does this automatically when you run the Wizards, but after running the Wizards you want to check your website with a Proxy.  This video tutorial:   http://forum.ait-pro.com/video-tutorials/#security-log-firewall shows how to check your site with a Proxy and how to manually add Plugin Firewall whitelist rules if something on your Server or something you have installed on your website is preventing the BPS Pro cURL scanner from working correctly.  Minifying will break the cURL scanner and pretty much everything else on a website too.  Before going into that known issue with Minifying breaking everything on a website let’s continue to isolate where this particular issue/problem is occurring.

Do this next: On the Security Modes page, click the Plugin Firewall BulletProof Mode Deactivate button.

[Dan]

Hey,

I did that, and it did fix it, everything goes back to normal and the ajax is now working. So, most likely I screwed something up or did something in the wrong order. I’ll take a look at that video and try to have another crack at it.

Very much appreciate all your time and help.

Cheers,
Dan

[AITpro Admin]

This troubleshooting step only confirms that the issue is directly related to the Plugin Firewall and eliminates any other possible known issues.  ie something is interfering with it working normally – minifying, another plugin, etc.

Now do this:
Clear your Browser cache and plugin cache
Click the Save Whitelist Options button.
Activate the Plugin Firewall again.
Refresh your Browser a couple of times.
Did the problem return or is everything displaying visually correct?

[Dan]

Hey,

Followed the instructions above and all is working now. Everything looks normal and plugin admin screens working normally.
Cheers,
Dan

[Author]

Posts