ERROR 403 in loading resources like CSS and JS in my index.php

Question 1

I'm in Linux, Elementary OS, and installed lampp in opt.

My CSS and JS won't load. When I inspect my page through browser. The console says Failed to load resource: the server responded with a status of 403 (Forbidden) I'm really sure that my directories are correct.

This is the error

Question 2

You need to change permissions on the folder bootstrap/css. Your super user may be able to access it but it doesn't mean apache or nginx have access to it, that's why you still need to change the permissions.

Tip: I usually make the apache/nginx's user group owner of that kind of folders and give 775 permission to it.

Question 3

I came up with my own crude solution and created a class to do what I was looking for. My sources are referenced at the bottom.

class css2string {
    var $css;

    function parseStr($string) {
        preg_match_all( '/(?ims)([a-z0-9, s.:#_-@]+){([^}]*)}/', $string, $arr);
        $this->css = array();
        foreach ($arr[0] as $i => $x)
        {
            $selector = trim($arr[1][$i]);
            $rules = explode(';', trim($arr[2][$i]));
            $this->css[$selector] = array();
            foreach ($rules as $strRule)
            {
                if (!empty($strRule))
                {
                    $rule = explode(":", $strRule);
                    $this->css[$selector][trim($rule[0])] = trim($rule[1]);
                }
            }
        }
    }

    function arrayImplode($glue,$separator,$array) {
        if (!is_array($array)) return $array;
        $styleString = array();
        foreach ($array as $key => $val) {
            if (is_array($val))
                $val = implode(',',$val);
            $styleString[] = "{$key}{$glue}{$val}";

        }
        return implode($separator,$styleString);   
    }

    function getSelector($selectorName) {
        return $this->arrayImplode(":",";",$this->css[$selectorName]);
    }

}

You can run it as follows:

$cssString = "
h1 {
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.item {
  font-size: 12px;
  border:1px solid #EEE;
}";

$getStyle = new css2string();
$getStyle->parseStr(cssString);
echo $getStyle->getSelector("div.item");

The output would be as follows:

font-size:12px;border:1px solid #EEE

This solution works even with comments within your CSS file, as long as the comments are not inside selectors.

References: http://www.php.net/manual/en/function.implode.php#106085 http://.com/questions/1215074/break-a-css-file-into-an-array-with-php

Question 4

A “comprehensive guide” of forbidden filename characters is not going to work on Windows because it reserves filenames as well as characters. Yes, characters like * " ? and others are forbidden, but there are a infinite number of names composed only of valid characters that are forbidden. For example, spaces and dots are valid filename characters, but names composed only of those characters are forbidden.

Windows does not distinguish between upper-case and lower-case characters, so you cannot create a folder named A if one named a already exists. Worse, seemingly-allowed names like PRN and CON, and many others, are reserved and not allowed. Windows also has several length restrictions; a filename valid in one folder may become invalid if moved to another folder. The rules for naming files and folders are on the Microsoft docs.

You cannot, in general, use user-generated text to create Windows directory names. If you want to allow users to name anything they want, you have to create safe names like A, AB, A2 et al., store user-generated names and their path equivalents in an application data file, and perform path mapping in your application.

If you absolutely must allow user-generated folder names, the only way to tell if they are invalid is to catch exceptions and assume the name is invalid. Even that is fraught with peril, as the exceptions thrown for denied access, offline drives, and out of drive space overlap with those that can be thrown for invalid names. You are opening up one huge can of hurt.

Question 5

For styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Then use: wp_enqueue_style('namespace'); wherever you want the css to load.

Scripts are as above but the quicker way for loading jquery is just to use enqueue loaded in an init for the page you want it to load on: wp_enqueue_script('jquery');

Unless of course you want to use the google repository for jquery.

You can also conditionally load the jquery library that your script is dependent on:

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

Update Sept. 2017

I wrote this answer a while ago. I should clarify that the best place to enqueue your scripts and styles is within the wp_enqueue_scripts hook. So for example:

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
    wp_enqueue_style( 'namespace' );
    wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}

The wp_enqueue_scripts action will set things up for the "frontend". You can use the admin_enqueue_scripts action for the backend (anywhere within wp-admin) and the login_enqueue_scripts action for the login page.

Question 6

With the setHeader() you're overridding any previously set header. Rather use addHeader() instead, or just put all values commaseparated as the header value. Here's the complete set:

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.

Your another mistake is that a PhaseListener isn't the best place for this. It's only invoked on JSF page requests, not on static resource requests which are independently invoked by the webbrowser. In other words, only the JSF page itself has caching disabled, but all <script>, <link>, <img>, etc will generate new requests which doesn't invoke that PhaseListener because those are not JSF pages.

Rather use a Filter.

@WebFilter("/*")
public class NoCacheFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
        response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
        response.setDateHeader("Expires", 0); // Proxies.
        chain.doFilter(req, res);
    }

    // ... (just keep init() and destroy() NO-OP)
}

If you target a Servlet 3.0 container (Tomcat 7, Glassfish 3, etc), then web.xml (or faces-config.xml) registration is not necessary. The @WebFilter("/*") will autoregister it and map it on an URL pattern of /* which thus covers all requests.

ERROR 403 in loading resources like CSS and JS in my index.php

Answers

See also:

php,css,linux,directory,lampp