Splunk Dev

Splunk JS Stack not working from external web page.

friscos
Explorer

Hi, I am trying very hard to embed Splunk in an external webpage using Splunk JavaScript stack but no luck so far.

I am trying a very simple example from here http://dev.splunk.com/view/SP-CAAAEWS

Anyone had luck connecting to splunk from external webpages using SplunkJS?

The difference from the example and my environment are Proxy and Scheme My environment is not https and there is no proxy.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
    <style type="text/css">
        .fail{
            color: red;
        }
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div class="main-area">
        <h2>Login Form</h2>
        <p>This page tests login and authentication. When you enter a 
            name and password, these credentials are used to log in 
            to Splunk.</p>
        <p>If login is successful, a session key is returned and stored 
            in a cookie, along with the username. Then, you are redirected 
            to another page that uses the same session key.</p>
        &lt;br/&gt;
        <p><b>Username:</b></p>
        <input id="usernamebox" type="text" value="admin">
        <p><b>Password:</b></p>
        <input id="pwbox" type="password" value="mypassword">
        &lt;br/&gt;
        <button class="btn" onclick="onLogin()">Log in</button>
        &lt;br/&gt;
        <div id="errorText"></div>
    </div>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Set the web site's base URL
        require.config({
            baseUrl: "/static"
        });

        // Log In button function
        function onLogin() {
            alert("Inside OnLogin");
            require([
                "jquery",
                "splunkjs/splunk",
            ], function($, jssdk) {
                alert('Inside Login');
                // Get the username and passwords
                var username = $("#usernamebox").val();
                var password = $("#pwbox").val();

                // Use the Splunk SDK for JavaScript to log in to Splunk

                // Create a Service object
                var http =  new jssdk.ProxyHttp("/proxy");
                var service = new jssdk.Service(http, {
                    username: username,
                    password: password,
                    scheme: "http",
                    host: "splunkdev", 
                    port: 8000
                });

                // Log in to Splunk
                service.login(function(err) {
                    alert('Inside Service Login');
                    // The session key and username are required for logging in
                    if (!err) {
                        var key = service.sessionKey;
                        // Save the session key and username in cookies
                        $.cookie("splunk_sessionkey", key);
                        $.cookie("splunk_username", username);

                        // Redirect to another page
                        window.location.href = "login_verify.html";  
                    }
                    else {
                        alert('Login Failed');
                        $("#errorText").empty().append("<p class='fail'>&lt;br/&gt;Login failed! See the console for error info.</p>");
                        console.error("Login failed: ", err);
                    }              
                });
            });
        }   
    </script>
</body>
</html>
Labels (2)

sloshburch
Splunk Employee
Splunk Employee

Did a webex and discovered that this was not working because of the browsers security policies around Same Origin Policy. We verified this by running the node.exe that comes with the SDK and connecting to a local splunk install successfully.

@friscos is now attempting http://www.thegeekstuff.com/2016/09/disable-same-origin-policy/ to allow his browser to connect to his remote Splunk instance.

Obviously the final solution must contain a proxy on the webserver to address this browser restriction in production.

0 Karma

sloshburch
Splunk Employee
Splunk Employee

Update from our webex: The javascript SDK comes with a node server that can abstract the cross domain challenge. It's actually all explained in the dev docs @ http://dev.splunk.com/view/javascript-sdk/SP-CAAAEWQ

0 Karma

AshChakor
Path Finder

Hi SloshBurch ,
I followed all the examples and its working fine with the node server.
How do I configure it on IIS server to work as a Proxy for connecting to Splunk Web from outside? Can you please share settings on IIS server, if i need to add proxy-pass in web.conf, if there is any snippet that you can share?

Thanks in advance.

0 Karma

sloshburch
Splunk Employee
Splunk Employee

@AshChakor - My memory is failing me now (the rest of the thread was three years ago) . I can't speak to how to set it up on IIS (not my background). When I navigate to the web.conf spec file and search for proxy a number of settings are discovered. Although maybe your best luck will come from one of these pages: https://docs.splunk.com/Special:SplunkSearch/docs?q=proxy

Sorry I can't be of more help here. Feel free to post a new question with your specifics to get more attention to your needs. Or a support ticket of course. Lastly, your account team might be able to provide more guidance.

Sorry, I wish I was smarter 😞

0 Karma

sloshburch
Splunk Employee
Splunk Employee

FYI. Splunk SDK for JavaScript version 1.8.1 was just released. Not sure if it addresses anything here but I wanted to let you know.

0 Karma

sloshburch
Splunk Employee
Splunk Employee

Remember that the SDKs use the splunkd REST endpoints.

  • You should see that the management interface in Splunk (also known as splunkd) is 8089 by default. In your example, you changed the port to 8000 which is likely the default web port. That will not work. This must connect to the management interface port.
  • I'm not sure you need the "/proxy" since there is no Splunk endpoint that uses that. I'll see if a peer can confirm.
  • The scheme needs to be https. Even though splunkweb is http, you're connecting to splunkd which is https by default. I highly doubt you went through the effort of disabling (if even possible) the splunkd https connection.
0 Karma

friscos
Explorer

Hi Burch,

I tried with https, 8089 port but no luck. I in fact tried all the combinations before posting it in the forum. I ran out of options now..

0 Karma

sloshburch
Splunk Employee
Splunk Employee

What was the error when you used https, 8089, and no '/proxy'? Please also include the error message that appeared in $SPLUNK_HOME/var/log/splunk/splunkd.log

0 Karma

friscos
Explorer

Hi Burch,

I do not see the request reaching the server. There is no request information logged in splunkd.log.

I am not able to attach screenshots. here are the error messages:

Code Snippet (with /proxy and https):

<script>
 splunkjs.config({
        proxyPath: '/proxy',
        scheme: 'https',
        host: 'splunkdev.com',
        port: 8089,
        authenticate: {username: 'admin', password: 'test123'}
    });
</script>

Error message on js console:

mvc.js:8819 POST http://localhost:6080/proxy/services/auth/login?output_mode=json 404 (Not Found)send @ mvc.js:8819ajax @ mvc.js:8249makeRequest @ mvc.js:24517request @ mvc.js:20231(anonymous function) @ mvc.js:19028post @ mvc.js:20166(anonymous function) @ mvc.js:19028login @ mvc.js:19746(anonymous function) @ mvc.js:19028authFunction @ mvc.js:70615loginLoad @ mvc.js:70634(anonymous function) @ mvc.js:70429execCb @ config.js:1636check @ config.js:872enable @ config.js:1143init @ config.js:780(anonymous function) @ config.js:1413
config.js:139 Uncaught Error: Login failed. Authenticate(done) received an error(anonymous function) @ mvc.js:70636(anonymous function) @ mvc.js:70617wrappedCallback @ mvc.js:19738wrappedCallback @ mvc.js:20212error @ mvc.js:24506(anonymous function) @ mvc.js:70831fire @ mvc.js:3161fireWith @ mvc.js:3273done @ mvc.js:8350callback @ mvc.js:8891


Code Snippet (with out proxy):

<script>
 splunkjs.config({
        proxyPath: '/',
        scheme: 'https',
        host: 'splunkdev.com',
        port: 8089,
        authenticate: {username: 'admin', password: 'test123'}
    });
</script>

Error message on js console:

config.js:164 Uncaught Error: Load timeout for modules: splunkjs/ready!_unnormalized2,splunkjs/ready!
http://requirejs.org/docs/errors.html#timeoutmakeError @ config.js:164checkLoaded @ config.js:690(anonymous function) @ config.js:711
mvc.js:8819 OPTIONS http://services/auth/login?output_mode=json net::ERR_CONNECTION_TIMED_OUTsend @ mvc.js:8819ajax @ mvc.js:8249makeRequest @ mvc.js:24517request @ mvc.js:20231(anonymous function) @ mvc.js:19028post @ mvc.js:20166(anonymous function) @ mvc.js:19028login @ mvc.js:19746(anonymous function) @ mvc.js:19028authFunction @ mvc.js:70615loginLoad @ mvc.js:70634(anonymous function) @ mvc.js:70429execCb @ config.js:1636check @ config.js:872enable @ config.js:1143init @ config.js:780(anonymous function) @ config.js:1413
config.js:139 Uncaught Error: Login failed. Authenticate(done) received an error
0 Karma

sloshburch
Splunk Employee
Splunk Employee

So the first example shows a 404 (with proxy) so you're trying to reach something that's not there.

If this is on your local, why are you using splunkdev.com? Why not localhost?

In the second, I see the url after OPTIONS shows http://services/auth/login?output_mode=json. I'm confused why the host:port portion is missing.

The url that it should end up calling should be like:
https://localhost:8089/services/auth/login?output_mode=json
Notice the:

  • https
  • use of localhost
  • port 8089, not 8000 and not 6080
  • no /proxy

You can validate this is the endpoint on your system by navigating to https://localhost:8089/services/auth/login in your web browser.

0 Karma

friscos
Explorer

Burch,

localhost and 6080 is the hostname and port number of my local tomcat server. splunkdev and 8089 are the server hostname and port number.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...