Websocket安全定义不起作用

Question

我有以下websocket安全配置：

@Configuration
public class WebSocketAuthorizationSecurityConfig extends AbstractSecurityWebSocketMessageBrokerConfigurer {
    @Override
    protected void configureInbound(final MessageSecurityMetadataSourceRegistry messages) {
        // You can customize your authorization mapping here.
        //messages.anyMessage().authenticated();
        messages.simpDestMatchers("/hello").hasRole("ADMIN");

    }

    // TODO: For test purpose (and simplicity) i disabled CSRF, but you should re-enable this and provide a CRSF endpoint.
    @Override
    protected boolean sameOriginDisabled() {
        return true;
    }
}

我希望只有管理员才能将邮件发送到/hello主题。
并遵循安全配置：

@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    private static final String SECURE_ADMIN_PASSWORD = "rockandroll";

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .csrf().disable()
                .formLogin()
                .loginPage("/index.html")
                    .loginProcessingUrl("/login")
                    .defaultSuccessUrl("/sender.html")
                    .permitAll()
                .and()
                .logout()
                    .logoutSuccessUrl("/index.html")
                    .permitAll()
                .and()
                .authorizeRequests()
                .antMatchers("/js/**", "/lib/**", "/images/**", "/css/**", "/index.html", "/","/*.css","/webjars/**", "/*.js").permitAll()
                .antMatchers("/websocket").hasRole("ADMIN")
                .requestMatchers(EndpointRequest.toAnyEndpoint()).hasRole("ADMIN")
                .anyRequest().authenticated();

    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

        auth.authenticationProvider(new AuthenticationProvider() {

            @Override
            public boolean supports(Class<?> authentication) {
                return UsernamePasswordAuthenticationToken.class.isAssignableFrom(authentication);
            }

            @Override
            public Authentication authenticate(Authentication authentication) throws AuthenticationException {
                UsernamePasswordAuthenticationToken token = (UsernamePasswordAuthenticationToken) authentication;

                List<GrantedAuthority> authorities = SECURE_ADMIN_PASSWORD.equals(token.getCredentials()) ?
                        AuthorityUtils.createAuthorityList("ROLE_ADMIN") : null;

                return new UsernamePasswordAuthenticationToken(token.getName(), token.getCredentials(), authorities);
            }
        });
    }
}

我也有以下websocket控制器：

@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(@Payload HelloMessage message, Principal principal) throws Exception {
    Thread.sleep(1000); // simulated delay
    simpMessagingTemplate.convertAndSendToUser(principal.getName(), "/queue/greetings", new Greeting("Ololo"));
    return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
}

接下来我以用户/传递（不是管理员）登录。

客户端成功向/hello主题发送消息：

stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));

和方法greeting成功调用。

我错了什么？

Answer 1

在我提供以下定义（添加<canvas id="canvas" width="400" height="233" style="border:1px solid red"></canvas> #canvas { background-color: white; } <script> var lineOffset = 4; var anchrSize = 2; var mousedown = false; var clickedArea = {box: -1, pos:'o'}; var x1 = -1; var y1 = -1; var x2 = -1; var y2 = -1; var boxes = []; var tmpBox = null; document.getElementById("panel").onmousedown = function(e) { mousedown = true; clickedArea = findCurrentArea(e.offsetX, e.offsetY); x1 = e.offsetX; y1 = e.offsetY; x2 = e.offsetX; y2 = e.offsetY; }; document.getElementById("panel").onmouseup = function(e) { if (clickedArea.box == -1 && tmpBox != null) { boxes.push(tmpBox); } else if (clickedArea.box != -1) { var selectedBox = boxes[clickedArea.box]; if (selectedBox.x1 > selectedBox.x2) { var previousX1 = selectedBox.x1; selectedBox.x1 = selectedBox.x2; selectedBox.x2 = previousX1; } if (selectedBox.y1 > selectedBox.y2) { var previousY1 = selectedBox.y1; selectedBox.y1 = selectedBox.y2; selectedBox.y2 = previousY1; } } clickedArea = {box: -1, pos:'o'}; tmpBox = null; mousedown = false; console.log(boxes); }; document.getElementById("panel").onmouseout = function(e) { if (clickedArea.box != -1) { var selectedBox = boxes[clickedArea.box]; if (selectedBox.x1 > selectedBox.x2) { var previousX1 = selectedBox.x1; selectedBox.x1 = selectedBox.x2; selectedBox.x2 > previousX1; } if (selectedBox.y1 > selectedBox.y2) { var previousY1 = selectedBox.y1; selectedBox.y1 = selectedBox.y2; selectedBox.y2 > previousY1; } } mousedown = false; clickedArea = {box: -1, pos:'o'}; tmpBox = null; }; document.getElementById("panel").onmousemove = function(e) { if (mousedown && clickedArea.box == -1) { x2 = e.offsetX; y2 = e.offsetY; redraw(); } else if (mousedown && clickedArea.box != -1) { x2 = e.offsetX; y2 = e.offsetY; xOffset = x2 - x1; yOffset = y2 - y1; x1 = x2; y1 = y2; if (clickedArea.pos == 'i' || clickedArea.pos == 'tl' || clickedArea.pos == 'l' || clickedArea.pos == 'bl') { boxes[clickedArea.box].x1 += xOffset; } if (clickedArea.pos == 'i' || clickedArea.pos == 'tl' || clickedArea.pos == 't' || clickedArea.pos == 'tr') { boxes[clickedArea.box].y1 += yOffset; } if (clickedArea.pos == 'i' || clickedArea.pos == 'tr' || clickedArea.pos == 'r' || clickedArea.pos == 'br') { boxes[clickedArea.box].x2 += xOffset; } if (clickedArea.pos == 'i' || clickedArea.pos == 'bl' || clickedArea.pos == 'b' || clickedArea.pos == 'br') { boxes[clickedArea.box].y2 += yOffset; } redraw(); } } function redraw() { // canvas.width = canvas.width; var context = document.getElementById("panel").getContext('2d'); context.globalCompositeOperation='destination-over'; context.clearRect(0, 0, 800, 600); context.beginPath(); for (var i = 0; i < boxes.length; i++) { drawBoxOn(boxes[i], context); } if (clickedArea.box == -1) { tmpBox = newBox(x1, y1, x2, y2); if (tmpBox != null) { drawBoxOn(tmpBox, context); } } } function findCurrentArea(x, y) { for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; xCenter = box.x1 + (box.x2 - box.x1) / 2; yCenter = box.y1 + (box.y2 - box.y1) / 2; if (box.x1 - lineOffset < x && x < box.x1 + lineOffset) { if (box.y1 - lineOffset < y && y < box.y1 + lineOffset) { return {box: i, pos:'tl'}; } else if (box.y2 - lineOffset < y && y < box.y2 + lineOffset) { return {box: i, pos:'bl'}; } else if (yCenter - lineOffset < y && y < yCenter + lineOffset) { return {box: i, pos:'l'}; } } else if (box.x2 - lineOffset < x && x < box.x2 + lineOffset) { if (box.y1 - lineOffset < y && y < box.y1 + lineOffset) { return {box: i, pos:'tr'}; } else if (box.y2 - lineOffset < y && y < box.y2 + lineOffset) { return {box: i, pos:'br'}; } else if (yCenter - lineOffset < y && y < yCenter + lineOffset) { return {box: i, pos:'r'}; } } else if (xCenter - lineOffset < x && x < xCenter + lineOffset) { if (box.y1 - lineOffset < y && y < box.y1 + lineOffset) { return {box: i, pos:'t'}; } else if (box.y2 - lineOffset < y && y < box.y2 + lineOffset) { return {box: i, pos:'b'}; } else if (box.y1 - lineOffset < y && y < box.y2 + lineOffset) { return {box: i, pos:'i'}; } } else if (box.x1 - lineOffset < x && x < box.x2 + lineOffset) { if (box.y1 - lineOffset < y && y < box.y2 + lineOffset) { return {box: i, pos:'i'}; } } } return {box: -1, pos:'o'}; } function newBox(x1, y1, x2, y2) { boxX1 = x1 < x2 ? x1 : x2; boxY1 = y1 < y2 ? y1 : y2; boxX2 = x1 > x2 ? x1 : x2; boxY2 = y1 > y2 ? y1 : y2; if (boxX2 - boxX1 > lineOffset * 2 && boxY2 - boxY1 > lineOffset * 2) { return {x1: boxX1, y1: boxY1, x2: boxX2, y2: boxY2, lineWidth: 2, color: 'red'}; } else { return null; } } function drawBoxOn(box, context) { xCenter = box.x1 + (box.x2 - box.x1) / 2; yCenter = box.y1 + (box.y2 - box.y1) / 2; context.strokeStyle = box.color; context.fillStyle = box.color; context.rect(box.x1, box.y1, (box.x2 - box.x1), (box.y2 - box.y1)); context.lineWidth = box.lineWidth; context.stroke(); context.fillRect(box.x1 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(box.x1 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(box.x1 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(xCenter - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(xCenter - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(xCenter - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(box.x2 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(box.x2 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize); context.fillRect(box.x2 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize); } function el(id){return document.getElementById(id);} // Get elem by ID var canvas = el("panel"); var context = canvas.getContext("2d"); var cx=100; function readImage() { if ( this.files && this.files[0] ) { var FR= new FileReader(); FR.onload = function(e) { var img = new Image(); img.addEventListener("load", function() { context.drawImage(img, 0, 0, 400, 233); }); img.src = e.target.result; }; FR.readAsDataURL( this.files[0] ); } } el("fileUpload").addEventListener("change", readImage, false); <script> ）后，它开始工作了：

/app